Question

I have 4 columns like this

<div class="container">
  <div class="row">
    <div class="col-md-3"> col3</div>
    <div class="col-md-1"> col1</div>
    <div class="col-md-4"> col4</div>
    <div class="col-md-4"> col4</div>
  </div>
</div>

Normally it looks like this:
[3][1][4][4]

When it's in smaller viewport, I want it to show like this:
[4]
[4]
[3]
[1]

I have tried

 <div class="container">
      <div class="row">
        <div class="col-md-3 col-md-push-8"> col3</div>
        <div class="col-md-1 col-md-push-8"> col1</div>
        <div class="col-md-4 col-md-pull-4"> col4</div>
        <div class="col-md-4 col-md-pull-4"> col4</div>
      </div>
    </div>

It shows:
In large viewport:
[4][4][3][1]

In viewport that those columns collapse:
[3]
[1]
[4]
[4]
But it seems like what I did is completely reversed...
A created a codepen snippet http://codepen.io/ngp130895/pen/Kzxdpj How can I achieve this?

Answer 1

我找到了解决方法。 ~~这看起来有点愚蠢，但确实有效。~~

 <div class="container">
      <div class="row">

        <div class="col-md-4 col-md-push-4"> col4</div>
        <div class="col-md-4 col-md-push-4"> col4</div>        
        <div class="col-md-3 col-md-pull-8"> col3</div>
        <div class="col-md-1 col-md-pull-8"> col1</div>

      </div>
</div>

编辑：我发现这实际上是正确的方法。默认情况下应写入移动视图，并通过推拉列来修改较大的视口。

Answer 2

您可以在此link

中获得解决方案

Answer 3

Div is an element block and every new div go to the head of the line. For fix this problem have two way:

Use tag
Use a code CSS for do became tag inline

For the first way you must only change tag <div> with <span. For the last way you can use it:

div.container > div.row > div {
  display: inline;
}

<div class="container">
  <div class="row">
    <div class="col-md-3"> col3</div>
    <div class="col-md-1"> col1</div>
    <div class="col-md-4"> col4</div>
    <div class="col-md-4"> col4</div>
  </div>
</div>

Bootstrap push/pull column issue

3 个答案: