How do I arrange this code so the 3 articles will be next

Need help in moving the lower article from the bottom to the top so all 3 articles will be placed in line. 

HTML Code:
<section class="more-news">
            <div class="news-section">
                <article class="left">
                    <h2>Is this the big stock-market rally? Not so fast</h2>
                    <img src="images/3.jpg">
                    <p>The market rally is finally taking off after a dismal start to 2016. Investors seem to be buying into the notion that the risk of recession has greatly receded...<a href="Article1.html">Click here to keep reading</a></p>
                </article>
                <article class="center">
                    <h2>Is this the big stock-market rally? Not so fast</h2>
                    <img src="images/9.jpeg">
                    <p>The market rally is finally taking off after a dismal start to 2016. Investors seem to be buying into the notion that the risk of recession has greatly receded...<a href="Article1.html">Click here to keep reading</a></p>
                </article>
                <article class="right">
                    <h2>Is this the big stock-market rally? Not so fast</h2>
                    <img src="images/9.jpeg">
                    <p>The market rally is finally taking off after a dismal start to 2016. Investors seem to be buying into the notion that the risk of recession has greatly receded...<a href="Article1.html">Click here to keep reading</a></p>
                </article>
            </div>       
            <aside>
                <h2>RECENT</h2>
                <div class="recent">
                    <img src="images/10.jpg">
                    <p><a href="#">2018 Mercedes-AMG C63 Coupe Makes its Debut</a></p>
                </div>
                <div class="recent">
                    <img src="images/11.jpg">
                    <p><a href="#">2018 Mercedes-AMG C63 Coupe Makes its Debut</a></p>
                </div>
                <div class="recent">
                    <img src="images/12.jpg">
                    <p><a href="#">2018 Mercedes-AMG C63 Coupe Makes its Debut</a></p>
                </div>
                <div class="recent">
                    <img src="images/13.jpg">
                    <p><a href="#">2018 Mercedes-AMG C63 Coupe Makes its Debut</a></p>
                </div>                
            </aside>
        </section>
    </main>


CSS:

.more-news {
    font-family: 'Roboro', sans-serif;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    padding: 0 5%;
    justify-content: space-between;
    color: black; 
    
}
.left p, .center p, .right p {
    font-size: 15px;
}

.news-section {
    display:flex;
    flex-wrap:wrap;
    flex-basis: 50%;
    justify-content: space-between;
}
.center, .right{
    flex-wrap:wrap;
}

.left h2 {
    color: #163172;
    font-family: 'Prompt', sans-serif;
}

.center h2 {
    color: #163172;
    font-family: 'Prompt', sans-serif;
}

.right h2 {
    color: #163172;
    font-family: 'Prompt', sans-serif;
}

.left h2, .center h2, .right h2 {
    margin: 10px 10px 0 0;
    padding: 0 10px;
    
}

.more-news img {
    width: 60%;
    height: 150px;
}

.left, .center, .right {
    flex-basis: 45%;
    
}

aside {
    width: 10%;
    padding: 3px;
    flex-basis: 15%;
    border: 1px solid #fff;
    border-radius: 5px;
    margin: auto 0;
}

p {
    text-align: justify;
}

.recent {
    display: flex;
   
}
aside h2 {
    color: #163172;
    font-family: 'Prompt', sans-serif;
    text-align: center;
}

aside .recent p a {
    text-decoration: none;
    color:#163762;
}

.recent img {
    width: 70px;
    height: 70px;
    margin: 10px;
}

.recent p {
    font-size: 14px;
    font-weight: bold;
    margin: auto;
}


(I wanted to add a picture of the website but for some reason I cant so you might want to look at it idk)

Posted by maor1702 2021-01-04 14:00:00

Please login to comment

Ask New Question