Question

我想为中等屏幕尺寸进行以下布局

<div class="col-md-12">A</div>
<div class="col-md-12">B</div>
<div class="col-md-12">C</div>

[A-12]
[B-12]
[C-12]

我想为大屏幕尺寸进行以下布局

<div class="col-lg-9>A</div>
<div class="col-lg-3>C</div>
<div class="col-lg-9>B</div>

[A-9][C-3]
[B-9]

我首先进行较小的屏幕设计（因为它应该首先是移动设备吗？）然后我试图推/拉B和C将C放在A旁边但是它没有用。

<div class="col-md-12 col-lg-9">A</div>
<div class="col-md-12 col-lg-9 col-lg-push-3">B</div>
<div class="col-md-12 col-lg-3 col-lg-pull-9">C</div>

//Expected result
[A-9][C-3]
[B-9]

//Result I'm getting
[A-9]
[C-3][B-9]

那么，我应该如何进行布局以获得预期的结果？

Answer 1

这就像我想你想要的那样：

Bootply ：http://www.bootply.com/zu6yDOeHwn

<强> HTML ：

<div class="container">
  <div class="col-md-12 col-lg-9">
    <div class="row">
          <div class="col-md-12 ">A</div>
         <div class="col-md-12">B</div>
    </div>
  </div>  
  <div class="col-md-12 col-lg-3">C</div>
</div>

如何根据屏幕尺寸订购列？

1 个答案: