html - Bootstrap 3.缩小屏幕时将主部分拆分为两个侧部分

Question

如何设计我的引导布局，以便侧面部分通常出现在主要部分旁边，但是当分解到较小的 View 时，主要部分将在它们之间分开。如下图所示。

Answer 1

当您想要在某些屏幕宽度上显示两个其他元素之间的元素，并将其以不同宽度放置在页面中的其他位置时，您可以采取三种操作:

1. 在两个位置都显示它，并使用适当的 @media 查询隐藏每个位置。不是特别微妙或优雅，但非常有效，因为它需要最少的编码。但是，如果您的元素具有相当大的大小(即:是主要内容)，那么这是一个非常糟糕的解决方案，因为它几乎会使页面大小增加一倍。
2. 使用窗口 resize 事件触发的 JavaScript 函数在 DOM 中移动元素。这通常是可以接受的，因为它增加了很多灵活性(没有布局/CSS 限制或挑战，无论如何)。
3. 如果可能，使三个元素成为同级元素，并使用 CSS 对它们重新排序。这是最好的解决方案，但并不总是可行。

但是，就您的情况而言，第三种解决方案是可以实现的:

第一步是使用三个同级布局(使用 CSS)呈现您想要的布局，而不是将其中两个分组到 Bootstrap 列中。您需要从正常的 Bootstrap 布局切换

row
  col-sm-4
    1. red
    3. green
  col-sm-8
    2. yellow

至:

row 
  col-sm-8 {float:right} 
    2. yellow 
  col-sm-4 
    1. red    
  col-sm-4 {clear:left} 
    3. green 

以上内容适用于宽度大于 768px 的设备。由于我们使用的是彩色 div，因此我还添加了负边距 hack，以使 .green 和 .yellow div 填充 中的剩余空间。行(取决于哪一个更长)，但这完全是可选的。

为什么我们要让他们成为 sibling ？因此，我们可以使用 flexbox 的 order 属性在较窄的屏幕上对它们重新排序。

这里是代码:

.red {
  background-color: #E81829;
}
.green {
  background-color: #24AA4A;
}
.yellow {
  background-color: #FDC32D;
}
.mySpecialRow > * >p:first-child:first-letter {
  font-size: 4.2rem;
  margin: 0 1.5rem;
  float: left;
}
@media (min-width: 768px) {
  .mySpecialRow {
    overflow: hidden; 
  }
  .mySpecialRow .yellow {
    float: right;
  }
  .mySpecialRow .yellow, .mySpecialRow .green {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
  }
  .mySpecialRow .green {
    clear: left;
  }
}
@media (max-width: 767px) {
  .mySpecialRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .yellow {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .green {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row mySpecialRow">
    <div class="col-sm-8 yellow">
      <p>2Pinterest brunch meh normcore. Umami quinoa cray, paleo plaid tousled hoodie hella hammock authentic cliche beard. Chillwave bitters master cleanse, celiac authentic pitchfork microdosing truffaut mustache vice portland distillery skateboard 3 wolf moon butcher. Banh mi keytar disrupt heirloom, retro selvage slow-carb 8-bit before they sold out. Chartreuse post-ironic everyday carry viral banjo dreamcatcher beard, you probably haven't heard of them craft beer trust fund mixtape authentic VHS cardigan. Crucifix messenger bag biodiesel, fixie pork belly ugh dreamcatcher kinfolk vice roof party twee paleo franzen leggings. Yuccie wayfarers jean shorts semiotics try-hard craft beer mustache, synth forage brunch asymmetrical.</p>
      <p>Gastropub blog small batch, +1 keytar lomo mumblecore aesthetic. Authentic affogato meggings master cleanse, blue bottle 8-bit church-key tumblr shoreditch occupy readymade photo booth raw denim. Typewriter truffaut retro, shabby chic heirloom letterpress pitchfork four loko offal distillery fap drinking vinegar cold-pressed. Chillwave trust fund small batch dreamcatcher hammock single-origin coffee deep v meditation, tattooed portland fanny pack fixie wayfarers try-hard. Austin +1 mustache, waistcoat paleo stumptown blue bottle kombucha fashion axe raw denim pinterest shabby chic iPhone vinyl. Tattooed pug viral celiac. Fixie helvetica food truck affogato, offal scenester fashion axe.</p>
      <p>Gastropub blog small batch, +1 keytar lomo mumblecore aesthetic. Authentic affogato meggings master cleanse, blue bottle 8-bit church-key tumblr shoreditch occupy readymade photo booth raw denim. Typewriter truffaut retro, shabby chic heirloom letterpress pitchfork four loko offal distillery fap drinking vinegar cold-pressed. Chillwave trust fund small batch dreamcatcher hammock single-origin coffee deep v meditation, tattooed portland fanny pack fixie wayfarers try-hard. Austin +1 mustache, waistcoat paleo stumptown blue bottle kombucha fashion axe raw denim pinterest shabby chic iPhone vinyl. Tattooed pug viral celiac. Fixie helvetica food truck affogato, offal scenester fashion axe.</p>
    </div>
    <div class="col-sm-4 red">
      <p>1Hella twee portland selvage, chicharrones tilde small batch. Wayfarers waistcoat stumptown you probably haven't heard of them quinoa, authentic marfa cronut aesthetic single-origin coffee fixie 3 wolf moon migas franzen. You probably haven't heard of them mixtape microdosing letterpress fingerstache before they sold out. 3 wolf moon keytar kale chips fixie, put a bird on it yuccie slow-carb street art hashtag green juice franzen kickstarter post-ironic. Bushwick franzen kickstarter taxidermy  pickled scenester +1 kitsch, seitan occupy normcore brooklyn kinfolk. Migas pop-up bitters hammock. Knausgaard kale chips occupy, tacos iPhone truffaut fanny pack wolf yr.</p>
    </div>
    <div class="col-sm-4 green">
      <p>3Street art cred godard normcore. Etsy tousled 3 wolf moon fashion axe try-hard. Four loko 3 wolf moon shoreditch, bespoke trust fund pug artisan gentrify seitan DIY literally selvage PBR&B pork belly kickstarter. Paleo jean shorts thundercats, butcher literally sartorial intelligentsia tacos. Fashion axe tofu YOLO, trust fund flexitarian tattooed mustache yr twee iPhone typewriter mixtape wayfarers cred. Blog art party next level everyday carry hoodie, cardigan iPhone cred yuccie kogi shabby chic meh ennui craft beer farm-to-table. Brunch cliche gastropub austin, paleo cornhole shoreditch jean shorts pabst polaroid.</p>
    </div>
  </div>
</div>