Twitter-bootstrap div 网格根据特定需求排列 [英] Twitter-bootstrap div grid arrangement based on specific requirement

问题描述

我有这个 twitter-bootstrap 网格结构.

<div class="col-lg-8">A</div><div class="col-lg-4">B</div>
<div class="row"><div class="col-lg-4">C</div><div class="col-lg-8">D</div>

如果我缩小屏幕尺寸，输出将是:

A乙CD

我的问题是，有没有可能让输出变成

A乙DC

尺寸变小

A B光盘

在桌面屏幕大小?

解决方案

我使用了flexible box解决方案来输出.根据屏幕尺寸重新排序 div C 和 D768 像素.在此处查看浏览器兼容性表:我可以使用 Flexbox 吗

@media (max-width: 768px) {.重新排序{显示:弹性；弹性方向:列；}.第二 {订单:1；}.第一的 {订单:2；}}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row"><div class="col-lg-8">A</div><div class="col-lg-4">B</div>

<div class="行重新排序"><div class="col-lg-4 first">C</div><div class="col-lg-8 second">D</div>

I've this twitter-bootstrap grid structure.

<div class="row">
    <div class="col-lg-8">A</div><div class="col-lg-4">B</div>
</div>
<div class="row">
    <div class="col-lg-4">C</div><div class="col-lg-8">D</div>
</div>

If I reduce the screen size, the output will be:

A
B
C
D

My question is, is it possible to let the output become

A
B
D
C

in smaller size and become

A  B
C  D 

in desktop screen size?

解决方案

I have used flexible box solution for the output. Reordered the divs C and D based on the screen size < 768px. Check the browser compatibility table here: Can I use Flexbox

@media (max-width: 768px) {
  .reorder {
    display: flex;
    flex-direction: column;
  }
  .second {
    order: 1;
  }
  .first {
    order: 2;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-8">A</div>
    <div class="col-lg-4">B</div>
  </div>
  <div class="row reorder">
    <div class="col-lg-4 first">C</div>
    <div class="col-lg-8 second">D</div>
  </div>
</div>

这篇关于Twitter-bootstrap div 网格根据特定需求排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！