Question

我有这段代码

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-9 col-sm-12">
                <p>A-1</p>
            </div>
            <div class="col-lg-3 col-sm-12">
                <div class="row no-gutters">
                    <div class="col-lg-6 col-sm-6">
                        <p>B-1</p>
                    </div>
                    <div class="col-lg-6 col-sm-6">
                        <p>B-2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

在大屏幕设备中，它分为内嵌 A ，然后 B 但在小屏幕设备中它变为 A 在顶部， B 在底部，我想要做的是保持SM设备的外观，但在LG设备中 B 按顺序来到 A 之前，我已经尝试了 flex col但是它在两个屏幕中都反转了它。

简化为：

LG：

B-1 B-2 - - - A-1

SM：

A-1

B-1 B-2

Answer 1

你不需要任何CSS。使用bootstrap推拉类 -

工作示例

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       
       
       </head>
       <body>
       
  
                
            
      <div class="container-fluid">
        <div class="row">
            <div class="col-lg-9 col-sm-12 col-lg-push-6">
                <p>A-1</p>
            </div>
            <div class="col-lg-3 col-sm-12 col-lg-pull-8">
                <div class="row no-gutters">
                    <div class="col-lg-6 col-sm-6">
                        <p>B-1</p>
                    </div>
                    <div class="col-lg-6 col-sm-6">
                        <p>B-2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

bootstrap网格col reorder

1 个答案: