Question

我正在尝试实现以下布局

Medium Device
+----------+---------------------+
|  Image   | WordA WordA WordA   |
|          +---------------------+
|          | Links Links Links   |
|          +---------------------+
|          | WordB WordB WordB   |
+----------+---------------------+

基于上述布局，如何推送＆＃34; Links / WordB＆＃34;中的地区从新线路开始的小型设备，或者，将Links / WordB右侧推送到图像，然后将WordA推送到中型设备。

Small Device
+------------+---------------+
|  Image     | WordA WordA   |
|            | WordA         |
+----------------------------+
| Links  Links Links         |
+----------------------------+
| WordB WordB WordB          |
+----------------------------+

我的MediumDevice示例如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Pragma" content="no-cache">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

    <style>
        div
        {
            border:solid 1px;
        }
        .big-box
        {
            background-color: #10BCFF;
            color: white;
            text-align: center;
            margin: 2px;
            font-size: 1.5em;
            height: 100px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="big-box">image</div>
            </div>
            <div class="col-md-8">
                <div class="row">
                    WordA WordA WordA
                </div>
                <div class="row">
                    Links Links Links
                </div>
                <div class="row">
                    WordB WordB WordB
                </div>
            </div>
        </div>
    </div>

</body>
</html>

感谢您的帮助桑托斯

Answer 1

<div class="container">
    <div class="row">
        <div class="col-xs-6">
             Image
        </div>
        <div class="col-xs-6">
             <div class="row">
                WordA WordA WordA
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
             WordA WordA WordA
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
             Links Links Links
        </div>
   </div>
</div>

另请注意：

Bootstrap网格系统有四个类：xs（手机），sm（平板电脑）， md（桌面）和lg（更大的桌面）。这些课程可以合并创建更加动态和灵活的布局。

来源：https://www.w3schools.com/Bootstrap/bootstrap_grid_examples.asp

Answer 2

管理解决如下

<style>
    .big-box {
        background-color: #10BCFF;
        color: white;
        text-align: center;

        font-size: 1.5em;
        height: 100px;
    }
</style>
<div class="container">
    <div class="row">
            <div class="big-box col-md-4 col-sm-6">image</div>
            <div class="col-md-8 col-sm-6"> WordA WordA WordA</div>
            <div class="col-md-8 col-sm-12">Links Links Links</div>
            <div class="col-md-8 col-sm-12">WordB WordB WordB</div>
    </div>
</div>

在Bootstrap中重新排列介质/小型设备之间的行

2 个答案: