Question

我下载了Bootstrap 4，设置$enable-flex true并重新编译。

我对Bootstrap 4和flexbox有疑问。

如果您缩小Twitter主页的大小，您可以看到＆＃34;关注谁＆＃34;部分从站点的右侧移动到左侧（但是主要的源不会受到影响），这是我想要使用Bootstrap 4和flexbox做的事情。因此，当我调整窗口大小时（对于像sm这样的假设大小），#right将在#left之后开始。 #middle是Feed部分。

我该怎么做？

这是我目前的设置。

＆＃13;

#left {
  background: yellow;
}
#middle {
  background: brown;
}
#right {
  background: #a8d6fe;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-3 col-md-2" id="left">
      <div class="col-md-12">PROFILE</div>
      <div class="col-md-12" id="menu">MENU</div>
    </div>
    <div class="col-sm-9 col-md-7" id="middle">NEWS</div>
    <div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
  </div>
</div>

＆＃13;

Answer 1

看起来您需要一个带有col-的div作为订购Flex项目的包装器。这是有道理的，因为只能订购弹性项目。不是弹性容器。

@import url('https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css');

[class*="col-"] {
    display: flex;
    flex-flow: row wrap;
}

#left{
    background:yellow;
}

#middle {
    background:brown;
    order: 1;
}

#right {
    background:#a8d6fe;
}

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-3 col-md-2" id="left">
        <div class="col-md-12">PROFILE</div>
        <div class="col-md-12" id="menu">MENU</div>
      </div>
      <div class="col-sm-9 col-md-7" id="middle">NEWS</div>
      <div class="col-sm-3 col-md-3" id="right">RIGHT PART</div> 
    </div>
  </div>
</div>

Bootstrap 4和列排序

1 个答案: