web-dev-qa-db-ja.com

Bootstrapプッシュ/プルを使用してcol-*-12列の順序を変更します

同じサイズの2つの列があります（.col-xs-12）そして、画面サイズがモバイルデバイスのサイズに対応する場合、それらの場所を変更します。それらを逆の順序で配置します。

Pushとpull bootstrapディレクティブはそれを達成するのに役立ちますが、次のクラスで同じサイズの2つの列の場所を変更することは可能ですか？

div.col-xs-12.col-xs-Push-12
  p test1
div.col-xs-12.col-xs-pull-12
  p test2
csstwitter-bootstraptwitter-bootstrap-3responsive-designgrid-layout
37
Mazzy

実際、Push/pullヘルパークラスによって.col-*-12を持つ列を並べ替えることはできません。列の合計が、12で定義されているデフォルトの@grid-columns列を超えています。

次のように、HTMLの列の順序を変更してから、より大きな画面で順序付けクラスを使用できます。

例はこちら

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-Push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

または、この派手なアプローチを使用して、上下に垂直に配置されている列の順序を逆にします。

例はこちら

@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix the horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix the horizontal alignment */
  }
}

CSS変換 IE9 でもサポートされていることに注意してください。ベンダープレフィックスを追加することを忘れないでください。

60
Hashem Qolami

Bootstrap 4では、あなたcanflexbox順序付けクラスを使用して、全角（12単位）列の順序を変更します。

2017を更新-Bootstrap 4 alpha 6

3.xでは、列を左右（水平方向）にのみプッシュ/プルできました。 4.xで新しいflexbox ordering utilsを使用すると、列の順序を垂直に変更）できるようになりました。 。

<div class="container">
  <div class="row">
    <div class="col-12">1</div>
    <div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div>
  </div>  
</div>

http://www.codeply.com/go/7RUJORgxBK

Update Bootstrap 4 Beta

アルファflex-順序付けクラスがorder-クラスに変更されました。

<div class="container">
  <div class="row">
    <div class="col-12 order-sm-1 order-2">1</div>
    <div class="col-sm-12 order-1">2 (first on xs)</div>
  </div>  
</div>

https://www.codeply.com/go/VUjKsM3cUD

6
Zim

あなたはそれを完全に行うことができます、 ブートストラップのグリッド列の順序 を参照してください

ただし、xs-12は全幅の列であるため、例は効果がありません。したがって、列の合計が12であるモデルにのみ適用されます（またはBootstrap grid）。説明のために、同じページのBootstrapの例を参照してください。

<div class="row">
  <div class="col-md-9 col-md-Push-3">.col-md-9 .col-md-Push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
3
Devin

私のような似たような問題で誰かがここに来た場合、プッシュ/プルを見つけるだけではニーズに合いません。col-xs-12はプル/プッシュしないか、2列以上使用するとプッシュ/プルを見つけるのが難しくなりますここで値をプルすることが私の解決策です。

以下は@hashemquolamiによる素晴らしいソリューションです

@media (max-width: 767px) {
 .row.reorder-xs {
   transform: rotate(180deg);
   direction: rtl; /* Fix the horizontal alignment */
 }

 .row.reorder-xs > [class*="col-"] {
   transform: rotate(-180deg);
   direction: ltr; /* Fix the horizontal alignment */
 }
}

このアプローチはうまくいきますが、別の解決策があります。

bootstrapグリッドは列を左にフローティングすることで機能します。これはcssで簡単に変更できます。ボーナスcol-md-offset-1が5つの中央列をエミュレートするために反転します。

[〜＃〜] html [〜＃〜]

<div class="container">
 <div class="row reverseOrder">
     <div class="col-md-2 col-md-offset-1">A</div>
     <div class="col-md-2">B</div>
     <div class="col-md-2">c</div>
     <div class="col-md-2">d</div>
     <div class="col-md-2 ">e</div>
 </div>
</div>

[〜＃〜] css [〜＃〜]

@media screen and ( min-width: 992px) {
  .reverseOrder [class^="col-"] {
      float: right;
  }
  .reverseOrder .col-md-offset-1 {
     margin-right: 8.333333333333332%;
     margin-left: 0px;
  }
}

[〜＃〜] jsfiddle [〜＃〜]

1
DGRFDSGN

次のようなレスポンシブケースで列の順序を変更する必要がある場合

div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12
  p test1
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12
  p test2

.pull-rightクラスを使用して、列の順序を逆にすることができます。

div.col-xs-12.col-sm-3.pull-right
  p test2
div.col-xs-12.col-sm-9
  p test1

その後、それらはcol-xs-12の順序であり、他のブレークポイントに対して正しく表示されます。

1
bluetwin

私は同じ問題を抱えており、このように解決しました：

[〜＃〜] html [〜＃〜]

<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;">
    <p>test</p>     
</div>  
<div class="col-md-2 col-sm-2 col-xs-12">
    <p>test</p> 
</div>
<div class="col-md-10 col-sm-10 col-xs-12 less-than">
    <p>test</p>                 
</div>

[〜＃〜] css [〜＃〜]

@media (max-width: 767px){
    .less-than {
        display: none;
    }
    .more-than {
        display: block !important;
    }
}
0
Janek Kozera