title: Trying to align two columns in Bootstrap 3 and I cant figure it out
body: <p>Might be easiest if I point you here: <a href="http://bootsnipp.com/snippets/featured/user-profile-widget" rel="nofollow">http://bootsnipp.com/snippets/featured/user-profile-widget</a></p>
  
  <p>What I am trying to do is align these side by side so that there are two per row...</p>
  
  <p>I'm just completely confused with the order of the columns...</p>
  
  <p>I guess any Bootstrap expert could please chime in with a suggestion? Thanks!</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-6 col-md-6"&gt;
          &lt;div class="well well-sm"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-6 col-md-4"&gt;
                      &lt;img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-6 col-md-8"&gt;
                      &lt;h4&gt;
                          Bhaumik Patel&lt;/h4&gt;
                      &lt;small&gt;&lt;cite title="San Francisco, USA"&gt;San Francisco, USA &lt;i class="glyphicon glyphicon-map-marker"&gt;
                      &lt;/i&gt;&lt;/cite&gt;&lt;/small&gt;
                      &lt;p&gt;
                          &lt;i class="glyphicon glyphicon-envelope"&gt;&lt;/i&gt;email@example.com
                          &lt;br /&gt;
                          &lt;i class="glyphicon glyphicon-globe"&gt;&lt;/i&gt;&lt;a href="http://www.jquery2dotnet.com"&gt;www.jquery2dotnet.com&lt;/a&gt;
                          &lt;br /&gt;
                          &lt;i class="glyphicon glyphicon-gift"&gt;&lt;/i&gt;June 02, 1988&lt;/p&gt;
                      &lt;!-- Split button --&gt;
                      &lt;div class="btn-group"&gt;
                          &lt;button type="button" class="btn btn-primary"&gt;
                              Social&lt;/button&gt;
                          &lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;
                              &lt;span class="caret"&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;Social&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="https://plus.google.com/+Jquery2dotnet/posts"&gt;Google +&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="https://www.facebook.com/jquery2dotnet"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="divider"&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Github&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>