Question

我想知道是否有一种方法可以在某个设备上隐藏div并在另一个设备上显示div，而无需复制代码和使用CSS技巧。

这就是我现在正在做的事情：

<div class="container"> 
<div class="row">
    <div class="col-md-8 d-none d-md-block left-panel">
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
    </div>
    <div class="col-md-4 d-none d-md-block right-sidebar">Right Sidebar
        <div class="widget1">Widget 1 </div>
        <div class="widget2">Widget 2 </div>
        <div class="widget3">Widget 3 </div>
    </div>
</div>
</div>

.left-panel {
float: left; 
background: gray;
width: 400px;
}

.box1,
.box2,
.box3 {
width: 200px;
background: white;
height: 50px;
border: 1px solid red;
margin-bottom: 20px;
}

.right-sidebar {
background: pink;
float:left;
width: 100px;
}

https://jsfiddle.net/p684mz2u/

我正在为我的项目使用Bootstrap 4。

现在我想要的是（从右侧栏中）我希望小部件1位于框1上方，小部件2位于框1和2之间，而小部件3位于框2和3之间。

我知道我可以在桌面和平板电脑上隐藏Widget 1，并通过使用display：none将其显示在移动设备上，然后将整个代码再次克隆到所需位置，但这就是创建线程的全部目的。我不想重复代码，但想通过CSS技巧来实现。

Answer 1

不使用重复代码的唯一CSS方法是将所有div保留在同一父行中。然后使用排序类在较小的屏幕上重新排序布局...

<div class="container">
    <div class="row">
        <div class="col-12 bg-pink">
            <div class="row d-md-block">
                <div class="left-panel col-md-8  order-1 float-left">
                    <div class="box1 mt-2">Box 1</div>
                </div>
                <div class="right-sidebar col-md-4 order-0 float-left">Widget 1 </div>
                <div class="right-sidebar col-md-4 order-2 float-left">Widget 2 </div>
                <div class="right-sidebar col-md-4 order-4 float-left">Widget 3 </div>
                <div class="left-panel col-md-8 order-3 float-left">
                    <div class="box2 mt-2 ">Box 2</div>
                </div>
                <div class="left-panel col-md-8 order-5 float-left">
                    <div class="box3 mt-2">Box 3</div>
                </div>
            </div>
        </div>
    </div>
</div>

演示：https://www.codeply.com/go/MhJSsHCFOT

通过CSS隐藏和显示而无需复制代码

1 个答案: