How can I format my CSS and Bootstrap so that only certain elements wrap when page width decreases?

Question

When the browser window is wide enough, my page elements render as desired:

Ideally, when the page shrinks in width, the "Add Contact" button and "Create Campaign" stay on the same line as long as possible. Instead, the "Create Campaign" button immediately shifts to the next line when the page shrinks:

I believe it is an issue with how I set up my Bootstrap rows. 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

It should be class="..." instead of className="..."

You can add several col classes in one div to define the individual behavior of the div for every defined screen size. Instead of class="col-lg-3" you could use class="col-xs-12 col-md-6 col-lg-3".

Answer 2

This is basic Bootstrap and I recommend going through the documentation to get a better idea.

Here, you have used col-lg-3 which tells the divs to stay next to each other when the screen-width is large. However, you haven't mentioned how the divs should behave when the screen-width is medium (md), small (sm) or extra small (xs). So, when the screen width decreases, they all cascade to take up one row each which is same as col-*-12 . Hence, the solution is to define the behaviour at all or required screen sizes. So, your code should be:-

<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

Try this solution out. Kind of what was said before, but setting the media breakpoint for col-xs size as well as the col-sm and 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>
);