How can I format my CSS and Bootstrap so that only some elements are wrapped when the page width is reduced?

Question

When the browser window is large enough, my page elements display as desired:

Ideally, when the page is shrinking in width, the Add Contact and Create Campaign buttons stay on the same line for as long as possible. Instead, the Create Campaign button immediately jumps to the next line when the page is compressed:

I believe this is a problem with the way I set up my Bootstrap strings. Please find my React and HTML here: http://jsfiddle.net/connorcmu/Lq2ew48v/

Relevant Section:

<section className="row">
      <div className="col-lg-3">
        <Dropdown
          secondary={this.toggle('showCreateDropdown')}
          caption={this.getIntlMessage('addContact')}
          primary={this.toggleForm('contactForm', 'uploadForm')}
          show={this.state.showCreateDropdown}
          fields={[{
            value: this.getIntlMessage('uploadMultiple'),
            action: this.toggleForm('uploadForm', 'contactForm')
          }]} />
      </div>

      <div className="col-lg-3">
        <a target="_blank"
          data-track="click"
          id="createNewsletter"
          data-action="navigate"
          href={props.gemUrl}
          className="btn btn-default newsletter"
          onClick={this.onCreateNewsletter}
          data-label="create-newsletter">
          {self.getIntlMessage('createCampaign')}
        </a>
      </div>

Answer 1

class= "..." className = "..."

col div, div . class= "col-lg-3" class= "col-xs-12 col-md-6 col-lg-3".

Answer 2

Bootstrap, , .

col-lg-3, divs , . , divs, (md), (sm) (xs). , , , , , col-*-12. , . , : -

<div className="col-lg-3 col-md-6 col-sm-12">
    <Dropdown
      secondary={this.toggle('showCreateDropdown')}
      caption={this.getIntlMessage('addContact')}
      primary={this.toggleForm('contactForm', 'uploadForm')}
      show={this.state.showCreateDropdown}
      fields={[{
        value: this.getIntlMessage('uploadMultiple'),
        action: this.toggleForm('uploadForm', 'contactForm')
      }]} />
  </div>

  <div className="col-lg-3 col-md-6 col-sm-12">
    <a target="_blank"
      data-track="click"
      id="createNewsletter"
      data-action="navigate"
      href={props.gemUrl}
      className="btn btn-default newsletter"
      onClick={this.onCreateNewsletter}
      data-label="create-newsletter">
      {self.getIntlMessage('createCampaign')}
    </a>
  </div>

Answer 3

. , , col-xs, col-sm col-md:

render: function render() {
  var self = this, 
      props = self.props;

  return (
    <div className="controls col-lg-12">
      {this.renderInfo()}
      {this.renderModal()}

      <section className="row">
        <div className="col-xs-4 col-sm-3 col-md-3 col-lg-3">
          <Dropdown
            secondary={this.toggle('showCreateDropdown')}
            caption={this.getIntlMessage('addContact')}
            primary={this.toggleForm('contactForm', 'uploadForm')}
            show={this.state.showCreateDropdown}
            fields={[{
              value: this.getIntlMessage('uploadMultiple'),
              action: this.toggleForm('uploadForm', 'contactForm')
            }]} />
        </div>

        <div className="col-xs-4 col-sm-3 col-md-3 col-lg-3">
          <a target="_blank"
            data-track="click"
            id="createNewsletter"
            data-action="navigate"
            href={props.gemUrl}
            className="btn btn-default newsletter"
            onClick={this.onCreateNewsletter}
            data-label="create-newsletter">
            {self.getIntlMessage('createCampaign')}
          </a>
        </div>

        <div className="col-xs-4 col-sm-3 col-md-3 col-lg-3">
          <span className="count">
            {self.getIntlMessage('totalCount')}: {props.count}
          </span>
        </div>

        <form className="col-xs-12 col-md-3 col-lg-3" onSubmit={self.search}>
          <input
            id="searchBar"
            type="text"
            ref="filterTextInput"
            placeholder={self.getIntlMessage('search')}
            value={self.state.query}
            className={'form-control' + (self.state.searching ? ' searching' :   '')}
            onChange={self.search} />
        </form>
      </section>

      {self.renderForm()}
  </div>
);