web-dev-qa-db-ja.com

Bootstrap 3：小さい画面サイズでのみ列をプッシュ/プルする

ページに次のレイアウトがあります。

<div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div>

 --------- ----- ----- ----- ---------
|    1    |  2  |  3  |  4  |    5    |
 --------- ----- ----- ----- ---------

しかし、小さな画面サイズでは、次のレイアウトが必要です：

<div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>

 ----------------- -----------------
|        1        |        5        |
 ----------------- -----------------
|     2     |     3     |     4     |
 ----------- ----------- -----------

（列の順序の再配置に注意してください。）小さな画面サイズでのみ列をプッシュ/プルすることは可能ですか？私は次のことを試しましたが、最も奇妙なレイアウトを取得し、<div>5</div>を完全に失うようです...：

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-Push-4">2</div>
<div class="col-lg-2 col-xs-4>3</div>
<div class="col-lg-2 col-xs-4>4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>
htmlcsstwitter-bootstraptwitter-bootstrap-3
55
mpdc

単純に考えて、自分で答えました：モバイルを最初に！

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-Push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>

最初にタブレットで必要な順序でそれらを取得し、次にそれらをプッシュ/プルしてデスクトップ上に配置します。

145
mpdc

要件がわずかに異なりました（同様の行で）

以下は私をそこに連れて行きます：

<div class="row">
    <div class="col-lg-1 col-xs-2">TIME</div>
    <div class="col-lg-5 col-xs-6">EVENT</div>
    <div class="col-lg-2 col-xs-4">STATUS</div>

    <div class="col-xs-2 visible-xs"></div> @*offset for xs*@

    <div class="col-lg-2 col-xs-6">START LIST</div>
    <div class="col-lg-2 col-xs-4">RESULTS</div>
</div>
5
Kcats Wolfrevo