3等幅div間のマージン（応答）

Question

幅が3つのdivがあり、3つ目のdivはブレークポイント（正確には991ピクセル）以下になるように全幅に展開され、すべてのdivはブラウザの幅が下になると767px、今では等幅（divの間にある&の間）が必要ですので、方法を教えてください。私はcssの助けを借りてフレームワークなしでこれを達成したいと思います。

ここでは、コードです：

* { 
 
    box-sizing: border-box; 
 
} 
 
h1 { 
 
    margin: 25px; 
 
    text-align: center; 
 
} 
 
div[class|=col] { 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
    border: 1px solid black; 
 
} 
 
html, 
 
body { 
 
    margin: 15px; 
 
} 
 
.title { 
 
    border-left: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    width: 25%; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    color: black; 
 
    text-align: center; 
 
} 
 
#Title1 { 
 
    background-color: orange; 
 
} 
 
#Title2 { 
 
    background-color: white; 
 
} 
 
#Title3 { 
 
    background-color: green; 
 
} 
 
p { 
 
    background-color: gray; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 25px; 
 
    font-family: Helvetica; 
 
    color: black; 
 
} 
 
.row { 
 
    width: 100%; 
 
}

<div class="row"> 
 
    <div class="col-lg-4 col-md-6 "> 
 
    <section id="Title1" class="title">Chicken</section> 
 
    <p>Some text</p> 
 
    </div> 
 

 
    <div class="col-lg-4 col-md-6"> 
 
    <section id="Title2" class="title">Beef</section> 
 

 
    <p>Some text</p> 
 
    </div> 
 

 
    <div class="col-lg-4 col-md-12"> 
 
    <section id="Title3" class="title">Sushi</section> 
 

 
    <p>Some text</p> 
 
    </div> 
 
</div>

Answer 1

3つのdivのにクラスを追加：DIV-1、DIV-2、このようDIV-3

@media only screen and (max-width:766px) { 
    .div-1.div-2.div-3 { 
     margin-bottom: 10px; 
    } 
} 

をすることができますが、要件に応じて特定の解像度のマージンを追加します。