Html 切换引导3中的两个字段

这是我的移动结构：

A
B
C

我需要更改桌面上的另一个：

C
A B

我试过拉和推，但没能使它工作

我的基本代码实际上是这样的：

<div class="col-md-? col-xs-12 col-md-push-?">
  <div class="col-md-6 col-xs-12">
    A
  </div>

  <div class="col-md-6 col-xs-12">
    B
  </div>
</div>

<div class="col-md-? col-xs-12 col-md-pull-?">
  C
</div>

---

正确的方法是什么？

这可以通过css完成，使用flexbox和媒体查询，如下所示：

.包装纸{ 显示器：flex； 柔性流：行换行； } .wrapper>*{ 弹性：1100%； } @仅介质屏幕和最小宽度：1224px{ .ab{ 顺序：2； 弹性：1自动； } c{ 顺序：1； } } A. B C

---

试试这个，检查一下。愿这个符合你的要求

引导示例 C A. B

---

我认为你不能使用引导网格系统垂直推拉

您可能需要一些jQuery

下面是一个快速测试：

HTML

Jquery测试

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.width() >= 992) {
          $( ".flexbox div.c" ).append().insertBefore( ".flexbox div.a" );
      }
      if (win.width() < 992) {
          $( ".flexbox div.c" ).append().insertAfter( ".flexbox div.b" );
      }
}).resize();

---

然而，你可以用侧栏和引导网格系统做很多事情。示例：

您可以更改大屏幕中列的顺序

因此，请更改列的顺序

 <!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

这将首先显示主要内容。在移动设备中，主要内容将首先显示

通过使用col-lg push和col-lg pull，我们可以在大屏幕上对列进行重新排序，并在左侧显示侧栏，在右侧显示主要内容

这是

---

我已经找到了另一个同样使用flex的解决方案。将flex的order属性用于变更单

为什么要使用col-md-push-6这将使文本留有空白，您可以将第一个div col-md-6更改为col-md-12以产生此结果，删除pull-push以默认网格嵌套内容，在现有的.col-sm-*列中添加一个新的.col行和一组.col-sm-*列。您能给我一个示例吗？我不能完全理解你说的话，你有没有考虑过使用flexbox和order属性？嗨，Brett，我没有想过，但我会试试，因为这可能是最快的解决方案。谢谢，但这并不能解决问题。我感兴趣的是C区并不总是在顶部。我需要C区站在桌面上，但不在桌面上mobile@neon_pc.因此，我们建议您使用一些js来实现这一目的。这是理论，但当您尝试使用col-lg-push-12或col-lg-pull-12进行此操作时，它会中断，因为我需要在您的代码中将blockstry切换为，并向我展示。这是我的工作。。也许我会帮助你。你展示的例子是针对同一领域的两个区块。我试着游完两个街区。从下到下，从上到下。正如我所说，您的代码是正确的，但并不能解决我提出的问题。@neon_pc我希望，这就是您要寻找的结果，其中C仅在台式机上居于首位。谢谢，但我需要尽可能使用最小的Javascript代码，答案中的jQuery只是一个快速测试，以表明可以使用jQuery完成。如果你想要一个更小的jQuery代码，或者你想在没有jQuery的情况下用普通javascript来实现它，你必须进行一些搜索，或者可能会发布一个新的问题，因为我不是一个强大的javascript程序员。最小的javascript可能是不使用javascript——就像公认的答案一样。

 <!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>