Скрыть и показать с помощью CSS без дублирования кода

Question

Я хочу знать, есть ли способ скрыть 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