How to sort bootstrap panels dividing them by left-right side and add content panel?

Question

I'm trying to sort the panels onto that way:

image screen - please enter to see:

But I've got more than 6 columns (it's 9). I'm looking forward to set 4 on the LEFT, 4 on the RIGHT and 1 in CONTENT.

My code is:

<div class="container-fluid">
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">Turnieje, w kórych jesteś zawodnikiem:</div>
            <div class="panel-body">
                <ul>
                    {% for playerT in playersT %}
                    <li><a href="{% url 'tournament' playerT.tournament_id.id %}">{{playerT.tournament_id.name}}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="panel-footer"><a href="{% url 'home' %}" class="btn btn-default">Przeglądaj wszystkie</a>
            </div>
        </div>
    </div>
    <div class="col-md-push-2 col-md-4 ">
        <div class="panel panel-primary">
            <div class="panel-heading">Turnieje, w których jesteś trenerem:</div>
            <div class="panel-body">
                <ul>
                    {% for tournament in ctournaments %}
                    <li><a href="{% url 'tournament' tournament.id %}">{{tournament.name}}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="panel-footer"><a href="#" class="btn btn-default">Przeglądaj wszystkie</a></div>
        </div>
    </div>
    <div class="col-md-push-2 col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">Twoje turnieje:</div>
            <div class="panel-body">
                <ul>
                    {% for tournament in mtournaments %}
                    <li><a href="{% url 'tournament' tournament.id %}">{{tournament.name}}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="panel-footer"><a href="#" class="btn btn-default">Przeglądaj wszystkie</a></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">Twoje drużyny:</div>
            <div class="panel-body">
                <ul>
                    {% for team in teams %}
                    <li><a href="{% url 'team' team.id %}">{{team.name}}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="panel-footer"><a href="#" class="btn btn-default">Przeglądaj wszystkie</a></div>
        </div>
    </div>
    <div class="col-md-push-2 col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">Zaproszenie do drużyny:</div>
            <div class="panel-body">
                <ul>
                    {% if playerteam %}
                    <li>{{ playerteam.team_id.name }} <a href="{% url 'playerToTeamAccept' playerteam.id %}">
                        Akceptuj </a></li>
                    {% endif%}
                </ul>
            </div>
            <div class="panel-footer"><a href="#" class="btn btn-default">Przeglądaj wszystkie</a></div>
        </div>
    </div>
    <div class="col-md-push-2 col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">Zaproszenia dla Twoich zawodników do turnieju:</div>
            <div class="panel-body">
                <ul>
                    {% for player in AplayersT %}
                    <li>{{ player.tournament_id.name }} <a href="{% url 'playerToTournamentAccept' player.id %}">
                        Akceptuj </a></li>
                    {% endfor%}
                </ul>
            </div>
            <div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByC' %}" class="btn btn-default">Akceptuj
                wszystkie</a></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">Zgłoszenia zawodników do Twoich turniejów:</div>
            <div class="panel-body">
                <table class="table table-hover table-condensed">
                    <br>
                    {% for EplayerT in EplayersT %}
                    <tr>
                        <td class="col-md-3" align="center"><a
                                href="{% url 'allTeamTourAcceptByM' EplayerT.player_id.team_id.id %}"> Akceptuj
                            drużynę {{ EplayerT.player_id.team_id.name }} </a></td>
                        <td class="col-md-3">Zawodnik {{ EplayerT.player_id.name }} {{ EplayerT.player_id.surname }}
                            zgłoszony do {{ EplayerT.tournament_id.name }}
                        </td>
                        <td class="col-md-3" align="center"><a
                                href="{% url 'playerToTournamentAccept' EplayerT.id %}"> Akceptuj zawodnika</a></td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
            <div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByM' %}" class="btn btn-default">Akceptuj
                wszystkie</a></div>
        </div>
    </div>
    <div class="col-md-push-2 col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">Przynależność do drużyny:</div>
            <div class="panel-body">
                <ul>
                    {% for player in players %}
                    <li><a href="{% url 'player' player.team_id.id %}">{{player.team_id.name}}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="panel-footer"><a href="{% url 'home' %}" class="btn btn-default">Pozostałe drużyny</a>
            </div>
        </div>
    </div>
    <div class="col-md-push-2 col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">Zaproszenia do Twojej drużyny:</div>
            <div class="panel-body">
                <ul>
                    {% for player in players %}
                    <li><a href="{% url 'player' player.team_id.id %}">{{player.team_id.name}}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="panel-footer"><a href="{% url 'home' %}" class="btn btn-default">Pozostałe drużyny</a>
            </div>
        </div>
    </div>
</div>

But now it looks:

image screen - please enter to see:

Does anyone has an idea how to sort it ? Thanks for each solution!

Answer 1

Are you looking for a layout like this? In that case I would suggest you to create three columns and simply put four panels inside the left and right column. Also has the advantage that the top of panel 2 isn't dependent on the bottom of panel 6.

.box {
  font-family: Arial;
  font-size: 24px;
  border: 1px solid #f99;
  background-color: #fee;
  color: #333;
  padding: 10px;
  height: 75px;
  margin-bottom: 10px;
}
.box.box--100 {
  height: 100px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="box">1</div>
      <div class="box box--100">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
    </div>
    <div class="col-xs-4">
      <div class="box">5</div>
    </div>
    <div class="col-xs-4">
      <div class="box box--100">6</div>
      <div class="box">7</div>
      <div class="box box--100">8</div>
      <div class="box box--100">9</div>
    </div>
  </div>
</div>