I'm trying to design a page avoiding code duplications.
Basically, I have a page with a filter component on the left and results on the right with a summary header.
On the mobile, the filter component is inside the summary header.
Playing with the display property I can achieve that, but don't want to duplicate html like in the following code.
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset='UTF-8'>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='d-none d-lg-flex col-lg-3'>DUPLICATED</div>
<div style='background-color:darkslategrey' class='col-12 col-lg-9'>
<div class='row'>
<div style='background-color:red' class='col-3 col-lg-6'>counter</div>
<div style='background-color:grey' class='col-4 d-lg-none'>DUPLICATED</div>
<div style='background-color:green' class='col-5 col-lg-6'>sorting</div>
</div>
<div class='row'>
<div class='col-12'>results</div>
</div>
</div>
</div>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65834898/css-flexbox-responsive-ui 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
