Repositionnement d'éléments côte à côte pour une mise en page réactive

Question

J'essaie d'adapter un site Web que j'ai créé pour la visualisation sur mobile/tablette. Je ai actuellement trois images & de côté «paires» où la mise en page pour chacun change de l'image sur la gauche à l'écart sur la droite, puis l'image sur la droite et de côté sur la gauche.

Je voudrais maintenant adapter cela afin que les sections de côté enveloppent sous chaque image correspondante pour la disposition mobile. Je suis un peu coincé donc j'apprécierais la meilleure pratique pour mettre en œuvre ma mise en page souhaitée.

Vous trouverez ci-dessous les extraits de code appropriés. (Les espaces vides sont où les images apparaissent.)

.about-text { 
 
    padding: 5% 5% 0 5%; 
 
} 
 

 
.def-width { 
 
    width: 50%; 
 
} 
 

 
.table { 
 
    display: table; 
 
} 
 

 
#experience article { 
 
    float: left; 
 
} 
 

 
#experience aside { 
 
    float: right; 
 
} 
 

 
#gas-safe article { 
 
    float: left; 
 
} 
 

 
#gas-safe aside { 
 
    float: right; 
 
} 
 

 
#gas-safe a { 
 
    color: #4E6E9B; 
 
    border-bottom: 1px dotted #4E6E9B; 
 
} 
 

 
#quality article { 
 
    float: left; 
 
} 
 

 
#quality aside { 
 
    float: right; 
 
} 
 

 
#to-top { 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #4E6E9B; 
 
} 
 

 
#to-top i { 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
#to-top:hover { 
 
    color: #fff; 
 
}

<div class="alt-color"> 
 
    <section class="table" id="experience"> 
 
    <article class="def-width"> 
 
     <img src="img/boiler-commission-scaled.jpg" class="about-img"> 
 
    </article> 
 
    <aside class="about-text def-width"> 
 
     <h2>34 Years Experience</h2> 
 
     <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p> 
 
    </aside> 
 

 
    </section> 
 

 
    <section class="table" id="gas-safe"> 
 

 
    <article class="about-text def-width"> 
 
     <h2>Gas Safe Accredited</h2> 
 
     <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards. 
 
     </p><br> 
 

 
     <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a> 
 

 
    </article> 
 
    <aside class="def-width"> 
 
     <img src="img/radiator-fitting-scaled.jpg" class="about-img"> 
 
    </aside> 
 

 
    </section> 
 

 
    <section class="table" id="quality"> 
 
    <article class="def-width"> 
 
     <img src="img/gas-engineer-scaled.jpg" class="about-img"> 
 
    </article> 
 
    <aside class="about-text def-width"> 
 
     <h2>Quality. Without Compromise.</h2> 
 
     <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p> 
 
    </aside> 
 
    </section> 
 

 
    <a id="to-top" href="index.html"> 
 
    <i class="fa fa-arrow-circle-up"></i> 
 
    </a> 
 

 
</div>

Answer 1

Si vous êtes prêt à utiliser bootstrap pour le contrôle de responsive design ci-dessous l'extrait, ce qui résout votre problème facilement avec des media queries.

.about-text { 
 
    padding: 5% 5% 0 5%; 
 
} 
 

 
#gas-safe a { 
 
    color: #4E6E9B; 
 
    border-bottom: 1px dotted #4E6E9B; 
 
} 
 

 
#to-top { 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #4E6E9B; 
 
} 
 

 
#to-top i { 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
#to-top:hover { 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container alt-color"> 
 
    <div class="row"> 
 
    <section id="experience"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <article class="def-width"> 
 
      <img src="img/boiler-commission-scaled.jpg" class="about-img"> 
 
     </article> 
 
     </div> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <aside class="about-text def-width"> 
 
      <h2>34 Years Experience</h2> 
 
      <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p> 
 
     </aside> 
 
     </div> 
 
    </section> 
 
    </div> 
 
    <div class="row"> 
 
    <section id="gas-safe"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <article class="about-text def-width"> 
 
      <h2>Gas Safe Accredited</h2> 
 
      <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards. 
 
      </p><br> 
 

 
      <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a> 
 

 
     </article> 
 
     </div> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <aside class="def-width"> 
 
      <img src="img/radiator-fitting-scaled.jpg" class="about-img"> 
 
     </aside> 
 
     </div> 
 

 
    </section> 
 
    </div> 
 
    <div class="row"> 
 
    <section id="quality"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <article class="def-width"> 
 
      <img src="img/gas-engineer-scaled.jpg" class="about-img"> 
 
     </article> 
 
     </div> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <aside class="about-text def-width"> 
 
      <h2>Quality. Without Compromise.</h2> 
 
      <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p> 
 
     </aside> 
 
     </div> 
 
    </section> 
 
    </div> 
 
    <a id="to-top" href="index.html"> 
 
    <i class="fa fa-arrow-circle-up"></i> 
 
    </a> 
 

 
</div>

Answer 2

il suffit d'ajouter cette requête média vers le haut de votre CSS:

@media screen and (max-width: 800px){ 
    .about-text.def-width { 
    width: 100%; 
    } 
    aside { 
    float: left !important; 
    } 
} 

Answer 3

Vous pouvez réaliser ce que vous essayez de le faire en utilisant @media-queries. J'ai dû modifier légèrement votre HTML car l'image de la deuxième rangée venait après le contenu.

Actuellement, il est configuré pour changer la disposition à 800px mais vous pouvez modifier facilement en modifiant la valeur max-width dans le CSS.

.about-text { 
 
    padding: 5% 5% 0 5%; 
 
} 
 

 
.def-width { 
 
    width: 50%; 
 
} 
 

 
.table { 
 
    display: table; 
 
} 
 

 
#experience article { 
 
    float: left; 
 
} 
 

 
#experience aside { 
 
    float: right; 
 
} 
 

 
#gas-safe article { 
 
    float: left; 
 
} 
 

 
#gas-safe aside { 
 
    float: right; 
 
} 
 

 
#gas-safe a { 
 
    color: #4E6E9B; 
 
    border-bottom: 1px dotted #4E6E9B; 
 
} 
 

 
#quality article { 
 
    float: left; 
 
} 
 

 
#quality aside { 
 
    float: right; 
 
} 
 

 
#to-top { 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #4E6E9B; 
 
} 
 

 
#to-top i { 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
#to-top:hover { 
 
    color: #fff; 
 
} 
 

 
@media (min-width: 800px) { 
 
    .hide-desktop { 
 
display: none; 
 
    } 
 
} 
 

 
@media (max-width: 800px) { 
 
    .hide-mobile { 
 
display: none; 
 
    } 
 
    #gas-safe article { 
 
float: none; 
 
width: 100%; 
 
text-align: center; 
 
    } 
 
    #experience article, 
 
    .table aside { 
 
float: none !important; 
 
width: 100%; 
 
text-align: center; 
 
    } 
 
    #quality article { 
 
float: none; 
 
width: 100%; 
 
text-align: center; 
 
    } 
 
}

<div class="alt-color"> 
 
    <section class="table" id="experience"> 
 
<article class="def-width"> 
 
    <img src="http://via.placeholder.com/300x200" class="about-img"> 
 
</article> 
 
<aside class="about-text def-width"> 
 
    <h2>34 Years Experience</h2> 
 
    <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p> 
 
</aside> 
 

 
    </section> 
 

 
    <section class="table" id="gas-safe"> 
 
<article class="def-width hide-desktop"> 
 
    <img src="http://via.placeholder.com/300x200" class="about-img"> 
 
</article> 
 
<article class="about-text def-width"> 
 
    <h2>Gas Safe Accredited</h2> 
 
    <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards. 
 
    </p> 
 
    <br> 
 

 
    <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a> 
 

 
</article> 
 
<aside class="def-width hide-mobile"> 
 
    <img src="http://via.placeholder.com/300x200" class="about-img"> 
 
</aside> 
 

 
    </section> 
 

 
    <section class="table" id="quality"> 
 
<article class="def-width"> 
 

 
    <img src="http://via.placeholder.com/300x200" class="about-img"> 
 
</article> 
 
<aside class="about-text def-width"> 
 
    <h2>Quality. Without Compromise.</h2> 
 
    <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p> 
 
</aside> 
 
    </section> 
 

 
    <a id="to-top" href="index.html"> 
 
<i class="fa fa-arrow-circle-up"></i> 
 
    </a> 
 

 
</div>