Изменить порядок столбцов в начальной загрузке для большего отображения

Вы не можете сделать это непосредственно в начальной загрузке. Вам нужно переместить блок содержимого рядом с блоком заголовка в зависимости от размера экрана. Это невозможно сделать, так как css не может перемещать div вокруг html.

1. Одним из решений является использование jquery для перемещения div при изменении размера. См. пример кода ниже. Но это может вызвать проблемы с производительностью, поскольку он будет проверять критерии при изменении размера экрана.

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" type="application/javascript"></script>
<script type="application/javascript">
    function moveDiv(){
        if($(window).width() > 990 ){ // screen size 
            $("#content").insertAfter("#header"); //insert after header div
        }else{
            $("#content").appendTo("#contentbox"); // append it as child to contentbox
        }
    }
    $(document).ready(function () {
        moveDiv();// default check whenever page loads
        $(window).resize(function(){
         moveDiv(); // on resize check
        });
    });
</script>
<div class="container text-center">
<div class="row">
    <div class="col-sm-12">
        <h4>Reorder columns in larger display</h4>
        <div class="row">
            <div id="headerbox" class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
                <div id="header" class="well">Header</div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6">
                <div class="well tall">Image</div>
            </div>

            <div id="contentbox" class="col-xs-12 col-sm-12 col-md-6 col-md-push-6">
                <div id="content" class="well">Content</div>
            </div>

        </div>
    </div>
</div>

2. You can use visible , invisible criteria on div but you should introduce same div twice ,if you need to maintain the structure.This is a quick hack, but the div should be repeated to maintain the structure.(EDIT: Refer post by lamelemon)

3. Это что-то новое для рассмотрения. Попробуйте использовать макеты сетки в недавно представленном CSS. Все, что вы объяснили, можно сделать с помощью нескольких строк кода, используя только css. https://css-tricks.com/snippets/css/complete-guide-grid/ и посмотрите это видео на YouTube https://www.youtube.com/watch?v=3vJE3bVoF-Q для демонстрации сетки

Если вы не используете bootstrap, вы можете сделать это с помощью обычного CSS, как я объяснил во фрагменте кода. Но вам нужно обеспечить совместимость со старым браузером.

.tall {
  height: 150px;
}

.divborder {
  border: hidden;
  margin: 1em;
  background-color: grey;
}

@supports (display: grid) /*If browser supports grid*/  {

 /*default div is displayed one by one*/
 
 /*for bigger screen sizes*/
  @media all and (min-width: 600px) {
    .box { /* grid container*/
      display: grid;
      grid-template-columns: 1fr 1fr; /*Specify number of columns 1fr is one fraction of screen*/
      grid-template-rows: 1fr 1fr; /*Specify number of rows*/
    }
    .header {
      grid-row: 1/2; /*start from 1 and end at 2 */
      grid-column: 2/-1; /*start from 2 and end of box (left to right edge)*/
    }
    .image {
      grid-row: 1/-1; /*top to bottom of row*/
      grid-column: 1/2
    }
    .content {
      grid-row: 2/-1;
      grid-column: 2/-1;
    }
  }
}
/*Code for backward compatability*/

<h4>Reorder columns in larger display</h4>
<div class="box">
  <div id="header" class="header divborder">Header</div>
  <div class="image tall divborder">Image</div>
  <div id="content" class="content well divborder">Content</div>
</div>

Я не думаю, что вы можете сделать это из коробки с помощью начальной загрузки без пробела, если только ваш контент не заполняет его, но что вы можете сделать, поскольку это просто изображение, это загрузить изображение в обоих местах и ​​скрыть и показать в зависимости от размера экрана с помощью .visible-* и .hidden-*.

.tall {height: 150px;}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row"> 
    <div class="col-sm-12">
      <h4>Reorder columns in larger display</h4>
      <div class="row"> 
         <div class="col-xs-12 col-sm-12 col-md-6 hidden-sm hidden-xs">
          <div class="well tall">Image</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="well">Header</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 visible-sm visible-xs">
          <div class="well tall">Image</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <div class="well">Content</div>
        </div>
      </div>    
    </div>
  </div>
</div>