title: How do I display featured articles with a WP_Query in Wordpress
body: <p>I have 2 rows, the top row which holds the featured articles has 2 columns and the bottom row that has the latest articles has 3 columns per row.</p>
  
  <p>I am grabbing and displaying the latest articles in the bottom row using <code>WP_Query()</code> which works fine. But how do I select specific articles as featured and display them with a single query in the top row, even though each column has a different width. first column is <code>col-md-4</code> second column is <code>col-md-8</code></p>
  
  <p><a href="https://i.stack.imgur.com/B5bf0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B5bf0.jpg" alt="enter image description here"></a></p>
  
  <p>I have installed Advanced Custom Fields and created a new field (checkbox) to be attached to posts and when I create or edit a new post, I can check the box to tell it that this is a featured article. Then I can get the data using <code>$variable = get_field('featured')</code> but I have no idea how do I go about displaying articles that are featured within a loop using Advanced Custom Fields.</p>
  
  <p>If there are better ways, please let me know because I'm out of ideas.</p>
  
  <p>This is my code so far</p>
  
  <pre><code>&lt;div class="row" id="featured-top"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;figure class="snip1253"&gt;
              &lt;div class="image" style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample52.jpg') center center / cover"&gt;&lt;/div&gt;
              &lt;figcaption&gt;
                  &lt;h3&gt;The World Ended Yesterday&lt;/h3&gt;
                  &lt;p&gt;
                      I don't need to compromise my principles, they don't have the slightest bearing.
                  &lt;/p&gt;
              &lt;/figcaption&gt;
              &lt;footer&gt;
                  &lt;div class="comments"&gt;
                      &lt;span class="fa-stack fa-2x"&gt;
                          &lt;i class="fa fa-comment fa-stack-1x"&gt;&lt;/i&gt;
                          &lt;strong class="fa-stack-1x fa-stack-text fa-inverse"&gt;5&lt;/strong&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/footer&gt;
              &lt;a href="#"&gt;&lt;/a&gt;
          &lt;/figure&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-8" id="big-col"&gt;
          &lt;figure class="snip1253" style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample52.jpg') center center / cover"&gt;
              &lt;div class="image"&gt;&lt;/div&gt;
              &lt;figcaption class="overlay"&gt;
                  &lt;h3&gt;The World Ended Yesterday&lt;/h3&gt;
                  &lt;p&gt;
                      I don't need to compromise my principles, they don't have the slightest bearing on what happens to me anyway.
                  &lt;/p&gt;
              &lt;/figcaption&gt;
              &lt;footer class="no-border"&gt;
                  &lt;div class="comments"&gt;
                      &lt;span class="fa-stack fa-2x"&gt;
                          &lt;i class="fa fa-comment fa-stack-1x"&gt;&lt;/i&gt;
                          &lt;strong class="fa-stack-1x fa-stack-text fa-inverse"&gt;5&lt;/strong&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/footer&gt;
          &lt;/figure&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row" id="featured-list"&gt;
      &lt;?php
      wp_reset_query();
      // WP_Query arguments
      $args = array(
          'post_type'              =&gt; array( 'post' ),
          'post_status'            =&gt; array( 'publish' ),
          'nopaging'               =&gt; false,
          'posts_per_page'         =&gt; 6,
      );
  
      // The Query
      $query = new WP_Query( $args );
  
      // The Loop
      if ( $query-&gt;have_posts() ) {
          while ( $query-&gt;have_posts() ) {
              $query-&gt;the_post();
              ?&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;figure class="snip1253"&gt;
                      &lt;div class="image" style="background: url('&lt;?php the_post_thumbnail_url(); ?&gt;') center center / cover"&gt;&lt;/div&gt;
                      &lt;figcaption&gt;
                          &lt;h3&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h3&gt;
                          &lt;?php the_excerpt(); ?&gt;
                          &lt;p class="the-date"&gt;&lt;?php the_author_posts_link(); ?&gt; - &lt;?php echo get_the_date(); ?&gt;&lt;/p&gt;
                      &lt;/figcaption&gt;
                      &lt;footer&gt;
                          &lt;div class="comments"&gt;
                              &lt;span class="fa-stack fa-2x"&gt;
                                  &lt;i class="fa fa-comment fa-stack-1x"&gt;&lt;/i&gt;
                                  &lt;strong class="fa-stack-1x fa-stack-text fa-inverse"&gt;&lt;a href="&lt;?php comments_link(); ?&gt;"&gt;&lt;?php comments_number('0','1','%' );?&gt;&lt;/a&gt;&lt;/strong&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/footer&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;?php
          }
      } else {
          // no posts found
      }
  
      // Restore original Post Data
      wp_reset_postdata();
      ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>#featured-top</code> is where I would like to display the featured posts.</p>
  
  <p>And if I can include the first column <code>col-md-4</code> with the second loop, that would be even better for me so I would only have to display the featured articles in the second column <code>col-md-8</code> but I'm not sure this is even possible.</p>