bootstrapプッシュ＆プル

Question

私はブートストラップでサイトを作成しています。質問があります。 pullとpushcolumnが好きで、の "more"のようなものを使うのは可能でしょうか？モバイル版では、次にrowのいずれかに第3のcolumnを置きます。たぶんimageが役に立つかもしれません。

DESKTOP 
--------------------------- 
|  1   --------|--------- 
| ----------  | 2  |  | 
| |3  |  |  |  | 
| ----------  |  |  | 
---------------------------  | 
        |    | 
        ------------------ 
Reverse version 
     --------------------------- 
---------|-------- 1   | 
|  |  |  ---------- | 
|2  |  |  |3  | | 
|  |  |  ---------- | 
|  --------------------------- 
|    | 
------------------ 
Mobile 
--------------------------- 
|1 ------------------ | 
| | 2    | | 
| |    | | 
| |    | | 
--------------------------- 
    |    | 
    ------------------ 
---------- 
| 3  | 
---------- 

私はこのような何かを試してみましたが、私は逆rowを行うことができますかわかりません。 classがdivの内側divでは動作しません、と私は定期的にcolumn互いの隣に1と2 column Sを入れて、pullとpushを使いたい理由ですが、2番目columnが歩くリバース。私はどのようにrowのうち3番目のcolumnをエクスポートするのかわかりません。

.webbg { 
 
\t height: 30vw; 
 
\t background-color: aqua; 
 
\t background-repeat: no-repeat; 
 
\t max-height: 75vw; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid my-5"> 
 
<div class="row"> 
 
\t <div class="col-sm-12 col-md-8 offset-md-0 offset-lg-1 webbg" style="background-color: aqua;"> 
 
\t <div class="col-3"><h3 class="text-uppercase"><strong>sometext</strong></h3></div> 
 
\t <div class="col-sm-12 offset-sm-0 col-md-12 col-lg-12 offset-md-4 offset-lg-4 offset-xl-7"> 
 
\t \t <img src="http://www.tweaks.pl/wp-content/uploads/2015/10/aoc-u3477pqu.png" class="img-fluid"> 
 
\t </div> \t 
 
\t </div> 
 
\t 
 
</div> \t 
 
</div>

Answer 1

私はあなたの明確化を理解していれば、あなたは列Aと列Bがそれぞれに崩壊する列Cは、以下の空間全体を占有して、小型のデバイス上で1/2 .rowを取ります。そして、（私が仮定すると）大画面では、それぞれが同じ量のスペースを占有しますか？

その場合、これは基本ブートストラップグリッド応答設計です。彼らはフレキシボックスに裏返しとして、あなたは間違いなくグリッド構文を自分で向きを変える必要がありますので、物事はブートストラップ4で若干変更：

：

http://getbootstrap.com/docs/4.0/layout/grid/

をあなた上記のようなレイアウトを実現するには、次のようなコードを使用します

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row text-center"> 
 
    <div class="col-6 col-md-4" style="background:#999">A</div> 
 
    <div class="col-6 col-md-4" style="background:#777">B</div> 
 
    <div class="col-12 col-md-4" style="background:#555">C</div> 
 
    </div> 
 
</div>

次のようにコードが上記読み出し方法は次のとおり

AとBの場合は、最も小さいブレークポイントに '6 of 12'列を使用します。 'medium'以上の場合は '4 of 12'の列を使用します。 Cの場合、最小のブレークポイントにはフル・カラム を使用してください。 'medium'以上の場合は、 '4 of 12' カラムを使用します。

、必要に応じて調整することができますが、あなたの意図は同じ行の中、より大きなすべての列が表示オンザが12