title: How to rearrange repeater automatically in VB.NET?
body: <p>I'm create the UI that display data from SQL Server using repeater in VB.Net and Bootstrap.
  I have 5 repeaters that display different data.
  I want to make the repeaters shown like this:</p>
  
  <p><a href="https://i.stack.imgur.com/YPp1F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YPp1F.png" alt="enter image description here"></a></p>
  
  <p>The repeaters will automatically rearrange if the data is added or removed.
  If the data from database is added or removed, I want the display is become something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/vdDEd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vdDEd.png" alt="enter image description here"></a></p>
  
  <p>I've try this code:</p>
  
  <pre><code>&lt;div class="col-md-6 col-sm-12"&gt;
      &lt;asp:Repeater ID="rptr1" runat="server"&gt; 
          &lt;HeaderTemplate&gt;
              &lt;div class="row"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-header"&gt;
                          &lt;h3&gt;Repeater 1&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="box-content"&gt;
                          &lt;ul class="dashboard-list"&gt;
          &lt;/HeaderTemplate&gt;
          &lt;ItemTemplate&gt;
              &lt;li&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field1") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field2") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
              &lt;/li&gt;
          &lt;/ItemTemplate&gt;
          &lt;FooterTemplate&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/FooterTemplate&gt;
      &lt;/asp:Repeater&gt;
  &lt;/ div&gt;
  
  &lt;div class="col-md-6 col-sm-12"&gt;
      &lt;asp:Repeater ID="rptr2" runat="server"&gt; 
          &lt;HeaderTemplate&gt;
              &lt;div class="row"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-header"&gt;
                          &lt;h3&gt;Repeater 2&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="box-content"&gt;
                          &lt;ul class="dashboard-list"&gt;
          &lt;/HeaderTemplate&gt;
          &lt;ItemTemplate&gt;
              &lt;li&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field1") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field2") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
              &lt;/li&gt;
          &lt;/ItemTemplate&gt;
          &lt;FooterTemplate&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/FooterTemplate&gt;
      &lt;/asp:Repeater&gt;
  &lt;/ div&gt;
  
  &lt;div class="col-md-6 col-sm-12"&gt;
      &lt;asp:Repeater ID="rptr3" runat="server"&gt; 
          &lt;HeaderTemplate&gt;
              &lt;div class="row"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-header"&gt;
                          &lt;h3&gt;Repeater 3&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="box-content"&gt;
                          &lt;ul class="dashboard-list"&gt;
          &lt;/HeaderTemplate&gt;
          &lt;ItemTemplate&gt;
              &lt;li&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field1") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field2") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
              &lt;/li&gt;
          &lt;/ItemTemplate&gt;
          &lt;FooterTemplate&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/FooterTemplate&gt;
      &lt;/asp:Repeater&gt;
  &lt;/ div&gt;
  
  &lt;div class="col-md-6 col-sm-12"&gt;
      &lt;asp:Repeater ID="rptr4" runat="server"&gt; 
          &lt;HeaderTemplate&gt;
              &lt;div class="row"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-header"&gt;
                          &lt;h3&gt;Repeater 4&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="box-content"&gt;
                          &lt;ul class="dashboard-list"&gt;
          &lt;/HeaderTemplate&gt;
          &lt;ItemTemplate&gt;
              &lt;li&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field1") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field2") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
              &lt;/li&gt;
          &lt;/ItemTemplate&gt;
          &lt;FooterTemplate&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/FooterTemplate&gt;
      &lt;/asp:Repeater&gt;
  &lt;/ div&gt;
  
  &lt;div class="col-md-6 col-sm-12"&gt;
      &lt;asp:Repeater ID="rptr5" runat="server"&gt; 
          &lt;HeaderTemplate&gt;
              &lt;div class="row"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-header"&gt;
                          &lt;h3&gt;Repeater 5&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="box-content"&gt;
                          &lt;ul class="dashboard-list"&gt;
          &lt;/HeaderTemplate&gt;
          &lt;ItemTemplate&gt;
              &lt;li&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field1") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
                  &lt;strong&gt;&lt;a href="#"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Field2") %&gt;&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;
              &lt;/li&gt;
          &lt;/ItemTemplate&gt;
          &lt;FooterTemplate&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/FooterTemplate&gt;
      &lt;/asp:Repeater&gt;
  &lt;/ div&gt;
  </code></pre>
  
  <p>But its displayed like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Ob5Pr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ob5Pr.png" alt="enter image description here"></a></p>
  
  <p>How can I make the display shown like the first image?</p>