循环在不同的类的Wordpress博克文章

i truly need your help since i'm a beginner in PHP and WordPress (ain't got people around to ask), how to make a PHP WordPress blog post loop in different class for only one latest post like this image..

here's the html code:

<!-- div that wrapped the large post -->

<div class="blog">
    <a href="#">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <img src="img/blog-super.jpg" class="img-responsive" />
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <div class="img-content text-left culturo-imagery">
                    <h2>The Only Thing Marketers Have to Fear Is Fear of Change</h2>
                    <div class="article-super">
                        Gladly, a customer-service software company, is offering organizations the opportunity to connect with customers on a variety of platforms. Gladly, a customer-service software company, is offering organizations the opportunity to connect with customers on a variety of platforms.variety of platforms.variety of platforms.
                    </div>
                    <div class="date">June, 20 2016</div>
                </div>
            </div>
        </div>
    </a>
</div>

<!-- div that wrapped the large post (end)  -->

<!-- div that wrapped the small posts -->

<div class="blog-sm">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <a href="">
                <div class="img-content text-left culturo-imagery">
                    <img src="img/blog1.jpg" class="img-responsive" />
                    <h4>We understand the unique pressures that business owners face.</h4>
                    <div class="article">
                        Gladly, a customer-service software company, is offering organizations the opportunity to connect with customers on a variety of platforms.
                    </div>
                    <div class="date">June, 20 2016</div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-md-4  col-sm-12 col-xs-12">
            <a href="#">
                <div class="img-content text-left culturo-imagery">
                    <img src="img/blog2.jpg" class="img-responsive" />
                    <h4>On a complete understanding, our team delivers.</h4>
                    <div class="article">
                        Chris Grabarkiewicz of Luxottica Retail discusses how to overcome the challenge of synthesizing traditional marketing research information with Big Data to generate insights.
                    </div>
                    <div class="date">June, 20 2016</div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-md-4  col-sm-12 col-xs-12">
            <a href="#">
                <div class="img-content text-left culturo-imagery">
                    <img src="img/blog3.jpg" class="img-responsive" />
                    <h4>And we can assist you in implementing the right solutions.</h4>
                    <div class="article">
                        Successful marketing is defined differently in different contexts. To understand its effect, researchers must consider all the factors that influence consumer choice, not just the marketing effort
                    </div>
                    <div class="date">June, 20 2016</div>
                </div>
            </a>
        </div>
    </div>
</div>

<!-- div that wrapped the small posts (end) -->

Really appreciate your help, Thanks in advance :)

-Avril-

</div>

To catch the first post you can do one loop with a conditional statement as an example:

<?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
/*the output of the first post*?
<?php else : ?>
/*the output of all other posts*/
<?php endif; ?>

in you case

   <?php if( $wp_query->current_post == 0 && !is_paged() ) : ?>
        <!-- div that wrapped the large post -->

<div class="blog">
    <a href="#">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <img src="img/blog-super.jpg" class="img-responsive" />
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <div class="img-content text-left culturo-imagery">
                    <h2>The Only Thing Marketers Have to Fear Is Fear of Change</h2>
                    <div class="article-super">
                        Gladly, a customer-service software company, is offering organizations the opportunity to connect with customers on a variety of platforms. Gladly, a customer-service software company, is offering organizations the opportunity to connect with customers on a variety of platforms.variety of platforms.variety of platforms.
                    </div>
                    <div class="date">June, 20 2016</div>
                </div>
            </div>
        </div>
    </a>
</div>
    <div class="blog-sm">
    <div class="row">
<!-- div that wrapped the large post (end)  -->
        <?php else : ?>

        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <a href="">
                <div class="img-content text-left culturo-imagery">
                    <img src="img/blog1.jpg" class="img-responsive" />
                    <h4>We understand the unique pressures that business owners face.</h4>
                    <div class="article">
                        Gladly, a customer-service software company, is offering organizations the opportunity to connect with customers on a variety of platforms.
                    </div>
                    <div class="date">June, 20 2016</div>
                </div>
            </a>
        </div>
        <?php endif; ?>
</div>
</div>

I also recommend to read this article : Different style for the first post