blocks|key|173407|text|值得注意的是，如果您使用的列不都等于6，则推送量将不等于初始列大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173408|如果您有两列(A和B)，并且希望列A在"sm“或更大的视口上较小且位于右侧，但位于移动(xs)视口的顶部，则可以使用以下方法：|173409|<div+class="row">
++++<div+class="col-sm-4+col-sm-push-8">A</div>
++++<div+class="col-sm-8+col-sm-pull-4">B</div>
</div>|code-block|syntax|javascript|173410|否则，列的对齐方式将显示为关闭。|173411|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>It's worth noting that if you are using columns that are not both equal to 6, then the push amount will not equal the initial column size.</p>

<p>If you have 2 columns (A &amp; B) and wish for column A to be smaller and to the right on "sm" or greater viewports, but atop a mobile (xs) viewport, you would use the following:</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-4 col-sm-push-8"&gt;A&lt;/div&gt;
    &lt;div class="col-sm-8 col-sm-pull-4"&gt;B&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Otherwise, the alignment of the columns will appear off.</p>


blocks|key|4679408|text|在Bootstrap+4中，假设你想要一个大屏幕的顺序和一个小屏幕的不同顺序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4679409|<div+class="container">
++<div+class="row">
++++<div+class="col-6+order-1+order-lg-2">
++++++This+column+will+be+ordered+second+on+large+to+extra+large+screens
++++</div>
++++<div+class="col-6+order-2+order-lg-1">
++++++This+column+will+be+ordered+first+on+large+to+extra+large+screens
++++</div>
++</div>
</div>|code-block|syntax|javascript|4679410|您可以省略上面的order-1和order-2。只是为了清楚起见才加进去的。默认顺序将是列在html中出现的顺序。|offset|length|style|CODE|4679411|有关更多信息，请访问https://getbootstrap.com/docs/4.1/layout/grid/#reordering|4679412|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.1/layout/grid/#reordering^0|0|0|8|7|G|7|0|A|1L|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$I|14|J|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>In Bootstrap 4, let's say you want to have one order for large screens and a different order for smaller screens:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-6 order-1 order-lg-2"&gt;
      This column will be ordered second on large to extra large screens
    &lt;/div&gt;
    &lt;div class="col-6 order-2 order-lg-1"&gt;
      This column will be ordered first on large to extra large screens
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>You can omit <code>order-1</code> and <code>order-2</code> above. Just added for clarity. Default order will be the order the columns appear in the html.</p>

<p>For more info <a href="https://getbootstrap.com/docs/4.1/layout/grid/#reordering" rel="noreferrer">https://getbootstrap.com/docs/4.1/layout/grid/#reordering</a></p>


blocks|key|173461|text|下面的代码适用于我|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173462|.row+{
++++display:+flex;
++++flex-direction:+column-reverse;
}|code-block|syntax|javascript|173463|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The below code work for me </p>

<pre><code>.row {
    display: flex;
    flex-direction: column-reverse;
}
</code></pre>


blocks|key|4679355|text|现在可以通过添加order-#类来完成(在Bootstrap+v4中)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4679356|请参阅https://getbootstrap.com/docs/4.1/migration/#grid-system-1|offset|length|4679357|如下所示：|4679358|<div+classname='col-md-8+order-2'>...</div>
<div+classname='col-md-4+order-1'>...</div>|code-block|syntax|javascript|4679359|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.1/migration/#grid-system-1^0|0|3|1M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>This is now done (in Bootstrap v4) by adding order-# classes.</p>

<p>See <a href="https://getbootstrap.com/docs/4.1/migration/#grid-system-1" rel="noreferrer">https://getbootstrap.com/docs/4.1/migration/#grid-system-1</a></p>

<p>Like this:</p>

<pre><code>&lt;div classname='col-md-8 order-2'&gt;...&lt;/div&gt;
&lt;div classname='col-md-4 order-1'&gt;...&lt;/div&gt;
</code></pre>


blocks|key|4679523|text|我有三个不同大小的bootstrap+4列。随着屏幕变小，第三列被隐藏，然后当屏幕变得更小，div堆叠在一起时，顺序发生变化，因此列2在顶部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4679524|++++<div+class="col-xs-12+col-sm-4+col-md-3+order-2+order-sm-1">
++++++++<h3>LEFT+HAND+SECTION</h3>
++++++++<p>For+news,+links+photos+or+comments.</p>
++++</div>
++++<div+class="col-xs-12+col-sm-8+col-md-5+order-1+order-sm-2">
++++++++<h3>MAIN+SECTION</h3>
++++++++<p>The+main+content+for+the+page.</p>
++++</div>
++++<div+class="col-xs-12+col-md-4+d-none+d-md-block+order-last">
++++++++<h3>BLANK+SECTION</h3>
++++++++<p>Will+usually+just+be+blank.</p>
++++</div>|code-block|syntax|javascript|4679525|我希望这能帮到你。我发现很难理解这一点，但最终在这个帖子的帮助下到达了那里，但它有点偶然。|4679526|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I have three bootstrap 4 columns of different sizes.  As the screen gets smaller the third column is hidden, then when the screen gets smaller still and the divs are stacked the order changes so that column 2 is at the top.</p>

<pre><code>    &lt;div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1"&gt;
        &lt;h3&gt;LEFT HAND SECTION&lt;/h3&gt;
        &lt;p&gt;For news, links photos or comments.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2"&gt;
        &lt;h3&gt;MAIN SECTION&lt;/h3&gt;
        &lt;p&gt;The main content for the page.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-12 col-md-4 d-none d-md-block order-last"&gt;
        &lt;h3&gt;BLANK SECTION&lt;/h3&gt;
        &lt;p&gt;Will usually just be blank.&lt;/p&gt;
    &lt;/div&gt;
</code></pre>

<p>I hope this helps.  I found it difficult to understand this but finally got there with the help of this thread, but it was a bit hit and miss.</p>


blocks|key|4679441|text|这在Bootstrap+4上对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4679442|<div+class="container-fluid">
++<div+class="row">
++++<div+class="col-md-4+order-md-last">
++++++<%25=+render+'form'%25>
++++</div>
++++<div+class="col-md-8+order-md-first">
++++++CONTENT
++++</div>
++</div>
</div>|code-block|syntax|javascript|4679443|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me on Bootstrap 4:</p>

<pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-4 order-md-last"&gt;
      &lt;%= render 'form'%&gt;
    &lt;/div&gt;
    &lt;div class="col-md-8 order-md-first"&gt;
      CONTENT
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|173506|text|我使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173507|.row+{
+++display:+flex;
+++flex-direction:+row-reverse;
}|code-block|syntax|javascript|173508|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I used:</p>

<pre><code>.row {
   display: flex;
   flex-direction: row-reverse;
}
</code></pre>


blocks|key|4679482|text|Bootstrap+4包含了flex的类。请参阅：https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4679483|<div+class="row+flex-column-reverse+flex-md-row">
++++<div+class="col-sm-10">
++++++++Col+1
++++</div>
++++<div+class="col-sm-2">
+++++++Col+2
++++</div>
</div>|code-block|syntax|javascript|4679484|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/^0|P|1Q|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Bootstrap 4 includes classes for flex.
See: <a href="https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/</a></p>

<pre><code>&lt;div class="row flex-column-reverse flex-md-row"&gt;
    &lt;div class="col-sm-10"&gt;
        Col 1
    &lt;/div&gt;
    &lt;div class="col-sm-2"&gt;
       Col 2
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|173474|text|在Bootstrap+V4+(2018年1月18日发布)中，您可以使用重新排序类。信息在这里的重新排序选项卡下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173475|https://getbootstrap.com/docs/4.0/layout/grid/|offset|length|173476|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>In Bootstrap V4 (Released January 18, 2018) You can use Reordering Classes.  Info here under Reordering tab.</p>

<p><a href="https://getbootstrap.com/docs/4.0/layout/grid/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/layout/grid/</a></p>


<p>I have a Bootstrap Page like this:</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
        A
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
       B
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Looks like:</p>

<pre><code>-----
|A|B|
-----
</code></pre>

<p>So if I look at it on a mobile Device, the Column A is on top, but I want the B on top.
Is this possible?
I tried it with push an pull, but it didn't work.</p>


Bootstrap right Column on top on mobile view

我有一个这样的Bootstrap页面：<div class="row">    <div class="col-md-6">        A    </div>    <div class="col-md-6">       B    </div></div>看起来像这样：-----|A|B|-----因此，如果我在移动设备上查看，A列在顶部，但我希望B在顶部。这个是可能的吗？我试着用推拉的方式

问在移动视图的顶部引导右列
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在移动视图的顶部引导右列EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在移动视图的顶部引导右列
EN