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?
答案 0 :(得分: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>
编辑:我发现这实际上是正确的方法。默认情况下应写入移动视图,并通过推拉列来修改较大的视口。
答案 1 :(得分:1)
您可以在此link
中获得解决方案答案 2 :(得分:-1)
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>