title: Bootstrap card whose image image is top/left, depending on column breakpoint?
body: <p>Most Bootstrap 4 <code>card</code>s with images have either a <code>.card-img-top</code> or an image that goes somewhere else, like left, using additional/custom code.</p>
  
  <p>Is there such thing as code for a single card whose image may be either at top of body or at left of body, depending on width?</p>
  
  <p>See below, my current two different card types...</p>
  
  <ul>
  <li>Top one is more standard with .card-img-top applied.</li>
  <li>However, in certain scenarios on my site, I will want a more horizontal approach, with image on the left, achieved not with <code>.card-img-top</code> but with two additional columns, side-by-side. You also see this in the image.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/6mafd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6mafd.png" alt="enter image description here"></a></p>
  
  <p>Right now, I have had to write separate code to do this - one card type for vertical, the other for horizontal.</p>
  
  <p>So I am curious - <strong>can I have a card whose image is either on top or on left depending on the size of the column containing it?</strong></p>
  
  <p>I'm trying to think it through, though...
  At browser <code>xs</code> and <code>sm</code>, all columns would be 12 and vertical cards required.
  But at browser <code>md</code> and <code>lg</code>, column widths will be varied according to mark-up needs as seen in the image.</p>
  
  <p>Is this something that can be achieved using single-card code, or is there logic that is more complex than just this?</p>
  
  <p>FYI...</p>
  
  <ol>
  <li><p>Here is the code for my vertical cards...</p>
  
  
  
  
  
  <p><strong>Interviews</strong></p>
  
    
    
  
  
  
  <pre><code>&lt;!-- column --&gt;
  &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2"&gt;
      &lt;!-- Card --&gt;
      &lt;div class="card rounded-0 w-100 bg-white shadow-sm"&gt;
          &lt;a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency"&gt;
                          &lt;img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="card-img-top img-fluid rounded-0"&gt;&lt;!-- had w-100 --&gt;
                        &lt;/a&gt;
          &lt;div class="card-body pb-2"&gt;
              &lt;h6 class="card-title"&gt;&lt;a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark"&gt;‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency&lt;/a&gt;&lt;/h6&gt;
          &lt;/div&gt;
          &lt;div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3"&gt;
                        &lt;img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle"&gt;
                        &lt;span class="ml-1"&gt;&lt;a href="/source/the-drum/" class="text-muted"&gt;The Drum&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Card --&gt;
  &lt;/div&gt;
  &lt;!-- column --&gt;
  
  
  &lt;!-- column --&gt;
  &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2"&gt;
      &lt;!-- Card --&gt;
      &lt;div class="card rounded-0 w-100 bg-white shadow-sm"&gt;
          &lt;a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/"&gt;
                          &lt;img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="card-img-top img-fluid rounded-0"&gt;&lt;!-- had w-100 --&gt;
                        &lt;/a&gt;
          &lt;div class="card-body pb-2"&gt;
              &lt;h6 class="card-title"&gt;&lt;a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/" class="text-dark"&gt;Interview: FT CEO Denies Sale And Braves Strike Ahead Of Social Launch&lt;/a&gt;&lt;/h6&gt;
          &lt;/div&gt;
          &lt;div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3"&gt;
                        &lt;img src="http://www.example.com/wp-content/uploads/favicon_pc.gif" width="17" class="rounded-circle"&gt;
                        &lt;span class="ml-1"&gt;&lt;a href="/source/paidcontent/" class="text-muted"&gt;paidContent&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Card --&gt;
  &lt;/div&gt;
  &lt;!-- column --&gt;
  
  
  &lt;!-- column --&gt;
  &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2"&gt;
      &lt;!-- Card --&gt;
      &lt;div class="card rounded-0 w-100 bg-white shadow-sm"&gt;
          &lt;a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/"&gt;
                          &lt;img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="card-img-top img-fluid rounded-0"&gt;&lt;!-- had w-100 --&gt;
                        &lt;/a&gt;
          &lt;div class="card-body pb-2"&gt;
              &lt;h6 class="card-title"&gt;&lt;a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" class="text-dark"&gt;Interview: Digital’s Second Age Begins Now, FT CEO Says&lt;/a&gt;&lt;/h6&gt;
          &lt;/div&gt;
          &lt;div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3"&gt;
                        &lt;img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" width="17" class="rounded-circle"&gt;
                        &lt;span class="ml-1"&gt;&lt;a href="/source/moconews/" class="text-muted"&gt;moconews&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Card --&gt;
  &lt;/div&gt;
  &lt;!-- column --&gt;
  
  
  &lt;!-- column --&gt;
  &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2"&gt;
      &lt;!-- Card --&gt;
      &lt;div class="card rounded-0 w-100 bg-white shadow-sm"&gt;
          &lt;a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/"&gt;
                          &lt;img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/rob-grimshaw-official-o-640x443.jpg" class="card-img-top img-fluid rounded-0"&gt;&lt;!-- had w-100 --&gt;
                        &lt;/a&gt;
          &lt;div class="card-body pb-2"&gt;
              &lt;h6 class="card-title"&gt;&lt;a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" class="text-dark"&gt;Interview: Financial Times’ Grimshaw: ‘App Stores Are Not A Panacea’&lt;/a&gt;&lt;/h6&gt;
          &lt;/div&gt;
          &lt;div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3"&gt;
                        &lt;img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" width="17" class="rounded-circle"&gt;
                        &lt;span class="ml-1"&gt;&lt;a href="/source/moconews/" class="text-muted"&gt;moconews&lt;/a&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Card --&gt;
  &lt;/div&gt;
  &lt;!-- column --&gt;
  </code></pre>
  
    
  
  
  
  
  
  </li>
  </ol>
  
  <p>2.</p>
  
  <p>And here is the code I'm trying for the horizontal-style cards...</p>
  
  <p></p>
  
  <pre><code>&lt;p&gt;&lt;strong&gt;Interviews&lt;/strong&gt;&lt;/p&gt;
  
  &lt;div class="row"&gt;
  
  
  
  
  
  &lt;!-- column --&gt;
  &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2"&gt;
      &lt;!-- Card --&gt;
      &lt;div class="card rounded-0 bg-white shadow-sm"&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-4"&gt;
                  &lt;a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency"&gt;
                                          &lt;img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="img-fluid rounded-0" style="object-fit:cover"&gt;&lt;!-- had w-100 --&gt;
                                        &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-8 pl-0 py-2"&gt;
                  &lt;div class="card-block"&gt;
                    &lt;h6 class="card-title"&gt;&lt;a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark"&gt;‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency&lt;/a&gt;&lt;/h6&gt;
                                                &lt;img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle"&gt;
                              &lt;span class="small pl-0 ml-0"&gt;&lt;a href="/source/the-drum/" class="text-muted"&gt;The Drum&lt;/a&gt;&lt;/span&gt;
  
  
                                    &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- end .row --&gt;
      &lt;/div&gt;
      &lt;!-- Card --&gt;
  &lt;/div&gt;
  &lt;!-- column --&gt;
  
  
  
  
  
  &lt;!-- column --&gt;
  &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2"&gt;
      &lt;!-- Card --&gt;
      &lt;div class="card rounded-0 bg-white shadow-sm"&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-4"&gt;
                  &lt;a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/"&gt;
                                          &lt;img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="img-fluid rounded-0" style="object-fit:cover"&gt;&lt;!-- had w-100 --&gt;
                                        &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-8 pl-0 py-2"&gt;
                  &lt;div class="card-block"&gt;
                    &lt;h6 class="card-title"&gt;&lt;a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/" class="text-dark"&gt;Interview: FT CEO Denies Sale And Braves Strike Ahead Of Social Launch&lt;/a&gt;&lt;/h6&gt;
                                                &lt;img src="http://www.example.com/wp-content/uploads/favicon_pc.gif" width="17" class="rounded-circle"&gt;
                              &lt;span class="small pl-0 ml-0"&gt;&lt;a href="/source/paidcontent/" class="text-muted"&gt;paidContent&lt;/a&gt;&lt;/span&gt;
  
  
  
  
                                    &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- end .row --&gt;
      &lt;/div&gt;
      &lt;!-- Card --&gt;
  &lt;/div&gt;
  &lt;!-- column --&gt;
  
  
  
  
  
  &lt;!-- column --&gt;
  &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2"&gt;
      &lt;!-- Card --&gt;
      &lt;div class="card rounded-0 bg-white shadow-sm"&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-4"&gt;
                  &lt;a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/"&gt;
                                          &lt;img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="img-fluid rounded-0" style="object-fit:cover"&gt;&lt;!-- had w-100 --&gt;
                                        &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-8 pl-0 py-2"&gt;
                  &lt;div class="card-block"&gt;
                    &lt;h6 class="card-title"&gt;&lt;a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" class="text-dark"&gt;Interview: Digital’s Second Age Begins Now, FT CEO Says&lt;/a&gt;&lt;/h6&gt;
                                                &lt;img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" width="17" class="rounded-circle"&gt;
                              &lt;span class="small pl-0 ml-0"&gt;&lt;a href="/source/moconews/" class="text-muted"&gt;moconews&lt;/a&gt;&lt;/span&gt;
  
  
  
  
  
                                    &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- end .row --&gt;
      &lt;/div&gt;
      &lt;!-- Card --&gt;
  &lt;/div&gt;
  &lt;!-- column --&gt;
  
  
  
  
  
  &lt;!-- column --&gt;
  &lt;div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2"&gt;
      &lt;!-- Card --&gt;
      &lt;div class="card rounded-0 bg-white shadow-sm"&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-4"&gt;
                  &lt;a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/"&gt;
                                          &lt;img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/rob-grimshaw-official-o-640x443.jpg" class="img-fluid rounded-0" style="object-fit:cover"&gt;&lt;!-- had w-100 --&gt;
                                        &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-8 pl-0 py-2"&gt;
                  &lt;div class="card-block"&gt;
                    &lt;h6 class="card-title"&gt;&lt;a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" class="text-dark"&gt;Interview: Financial Times’ Grimshaw: ‘App Stores Are Not A Panacea’&lt;/a&gt;&lt;/h6&gt;
                                                &lt;img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" width="17" class="rounded-circle"&gt;
                              &lt;span class="small pl-0 ml-0"&gt;&lt;a href="/source/moconews/" class="text-muted"&gt;moconews&lt;/a&gt;&lt;/span&gt;
  
  
  
  
  
                                    &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- end .row --&gt;
      &lt;/div&gt;
      &lt;!-- Card --&gt;
  &lt;/div&gt;
  &lt;!-- column --&gt;
            &lt;/div&gt;
  
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>(I am endeavouring to make the images "cover" style, where they fill the available space.
  Images on a vertical card should retain a landscape orientation, images on a horizontal card should be square. NB - there is currently an issue with my horizontal-card code which introduces a border/margin below the left image when the text on the right is longer than it.)</p>