时间戳

首页 > 解决方案 > 如何使用引导程序将项目从行中提取到另一个？

css - 如何使用引导程序将项目从行中提取到另一个？

问题描述

是否有可能使用 bootstrap4 或使用纯 css flex 类将桌面上的第一个网格移动到移动设备上的第二个网格？

桌面视图：

在此处输入图像描述

移动视图：

在此处输入图像描述

目前我的解决方案是以下一个，但我不喜欢在两个地方重复绿色内容。请问我可以避免吗？

<div class="container">
<main class="row">
    <section class="col-lg-8 ecran">
        <div class="row mes-contrats justify-content-around">
            <div class="col-12">
                lot's of content in red container
            </div>
        </div>
        <div class="row infos justify-content-around d-none d-lg-block">
            <div class="col-12">
                lot's of content in green container
            </div>
        </div>
    </section>
    <div class="col-lg-4 asides">
        <div class="row">
            <div class="col-12">
                lot's of content in blue container
            </div>
            <div class="col-12 d-block d-lg-none">
                lot's of content in green container
            </div>
        </div>
    </div>
</main>

标签： cssbootstrap-4flexbox

解决方案

position-absolute该解决方案不是纯引导程序，因为为了实现该解决方案，我使用了绝对位置，并且引导程序在实用程序上没有移动断点。

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <style>
        .cnt-red { border: 5px solid red; }
        .cnt-blue { border: 5px solid blue; }
        .cnt-green { border: 5px solid green; }

        @media (min-width: 576px) {
            .cnt-left { width: 75%; }
            .cnt-right { width: 25%; right: 0; top:0; position: absolute; }
        }
    </style>
</head>
<body>
    <div class="d-flex flex-column ">
        <div class="p-2 cnt-left flex-grow-1 cnt-red flex-fill">Flex item 1</div>
        <div class="p-2 cnt-right cnt-blue flex-fill">Flex item 2: Lorem ipsum dolor sit amet consectetur adipisicing elit... </div>
        <div class="p-2 cnt-left cnt-green flex-fill">Flex item 3</div>
    </div>
</body>
</html>

推荐阅读