Bootstrap button beside paragraph (responsive)

Question

I'd like to have a button which responsively stays beside a paragraph, without the paragraph text wrapping around the button.

For example, here is the current code I am using:

<div class="myclass">
    <a href="#" class="btn btn-primary btn-sm">Button</a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

This produces the following:

[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem 
ipsum dolor sit amet, consectetur adipiscing elit.

What I want, is the following:

[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         In vitae turpis porta, lobortis turpis in, pretium erat. Lorem 
         ipsum dolor sit amet, consectetur adipiscing elit.

I want it to remain this way no matter what the screen resolution is.

How would I accomplish this?

Answer 1

You can use Bootstraps Media Object to do this.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="media">
    <div class="media-left"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-middle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <hr>
  <div class="media">
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="media-right media-middle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-middle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="media-right media-middle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-midle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>
<hr>