Bonsoir à tous

Je suis en train de réfléchir et de faire un peu de prototypage pour structurer un bout de page html pour le rendre responsible.

Voici la structure html que je dispose pour l'instant:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div id="content">
            <div class="main-column">
                Article 1: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum deserunt ea asperiores maiores omnis, dolorem aperiam eveniet et culpa dolores dolorum dicta quasi labore voluptatum deleniti! Voluptatum, est temporibus.
            </div>
            <div class="main-column">
                Article 2: Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facilis ut error quasi ea et maiores temporibus, possimus enim aliquid obcaecati minima quidem qui, quas odit, omnis velit earum non! Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur numquam quas illum et, quam fuga voluptatem ex ut veritatis. Rerum accusantium dolore officiis velit ipsum dolores nesciunt quos tenetur voluptatem?
            </div>
            <div class="main-column">
                Article 3: Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque autem officia iusto animi. Eligendi molestias reiciendis soluta omnis ex corrupti. Porro ipsam perferendis dolore placeat quaerat omnis commodi et nisi.
            </div>
            <div class="main-column">
                Article 4: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur itaque aperiam laudantium ipsum ad sapiente et accusantium eum consequuntur blanditiis, vero totam distinctio voluptatibus inventore velit! Adipisci, quasi culpa! Vero.
            </div>
            <div class="main-column">
                Article 5: Lorem ipsum dolor sit, amet consectetur adipisicing elit. At inventore cupiditate atque totam corporis possimus, praesentium consectetur voluptatum. Molestias tenetur deleniti odio labore! Officia repudiandae quia harum illum maiores quisquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos atque, porro unde reiciendis incidunt natus quod illo eligendi temporibus nesciunt magnam hic? Temporibus officiis asperiores illum. Esse facere quae nemo?
                At repudiandae similique vel veniam temporibus, quas voluptatum porro explicabo voluptates soluta sequi sunt ratione dolor, molestiae doloremque? Aliquid fugit architecto ipsam modi reprehenderit nemo amet corrupti voluptates, sed inventore!
                Illum labore laudantium minus? Perferendis sit unde explicabo ratione neque beatae, id minus ipsum eveniet sequi? Dolor, rem libero sapiente fugiat laboriosam corrupti fuga exercitationem. Ipsa obcaecati consequatur iure? Eum.
            </div>
            <div class="main-column">
                Article 6: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, beatae ea! Minus pariatur repellendus maiores cumque quo dicta corrupti debitis, enim labore tempore corporis porro harum odio, eaque, voluptatum quas?
            </div>
            <div class="main-column">
                Article 7: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo laboriosam corporis molestiae animi quae voluptatibus eum illum impedit eius fugit perferendis vitae eos vel laudantium nihil odio reiciendis, sapiente distinctio?
                Dolores voluptatum laudantium porro voluptate modi. Culpa sint quibusdam voluptatem explicabo hic dolores ab corrupti a labore tempora quas cum similique, consequuntur, officiis alias illum neque incidunt. Aperiam, necessitatibus soluta!
                Sunt vel eveniet obcaecati asperiores modi, esse culpa enim quod animi quidem quaerat ipsa ab officia ipsum tempora. Voluptatem, sed. Doloribus vitae maiores neque error eum culpa incidunt modi mollitia.
                Blanditiis vitae aperiam porro impedit hic beatae aspernatur quos molestiae, quas, accusamus alias repellendus, eos at. Incidunt sed commodi quae quos voluptatibus ad, rerum recusandae temporibus debitis doloremque officiis omnis?
                Unde in sunt sit quae repellendus, aliquam eligendi? Natus fugit, recusandae eaque, harum nobis officia dolor iure aliquam delectus est perspiciatis praesentium deserunt dolore suscipit accusamus, architecto expedita esse ab.
            </div>
            <div class="secondary-column" id="test">
                Pub 1
            </div>
             <div class="secondary-column">
                Pub 2
            </div>
             <div class="secondary-column">
                Pub 3
            </div>
             <div class="secondary-column">
                Pub 4
            </div>
             <div class="secondary-column">
                Pub 5
            </div>
    </div>

Et je souhaiterais avoir ce retour pour la version desktop:

Nom : desktop.png Affichages : 391 Taille : 16,8 Ko

Et ceci pour la version mobile:

Nom : tablette mobile.png Affichages : 386 Taille : 16,0 Ko

L'idée est de pouvoir, pour la version mobile, mettre entre 2 articles une pub (initialement dans cette sorte d'aside).

Initialement, j'avais mis une balise section qui contient les articles et une aside, ces blocs pub..... Hors, en pur css, je ne vois pas comment "extraire" des div spécifiques vers une autre div.

Je me suis donc penché sur le display grid, mais répond en parti à ma problématique, mais qui ne correspond pas exactement à ce que je veux => https://codepen.io/leknoppix/pen/eYLgMad

J'ai pensé aussi au flexbox, mais cela revient à ma première idée => https://codepen.io/leknoppix/pen/BaOpOrN


Auriez vous des idées à me proposer? Merci d'avance.

lemirandais