title: How swap all divs with each other
body: <p>That is how my gallery looks like: 
  <a href="https://i.stack.imgur.com/yl4gU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yl4gU.png" alt="images gallery"></a></p>
  
  <p>I need javascript/jquery functions: "arrow_left()" and "arrow_right" for changing positions of divs with images (all divs with everything in middle). For example when I click on right arrow on "image 2", "image 2" should swap with "image 3" their possitions. 
  Below I present how swap "image 2" with "image 3" leaving "image 2" empty ("image 3" will be removed).</p>
  
  <pre><code>&lt;script&gt;
      function arrow_right(id_number) {
          var present_div = $('#' + id_number);
          id_number = id_number + 1;
          var next_div = $('#' + id_number);
  
          $(present_div).replaceWith(next_div); 
          //$(next_div).replaceWith(present_div); &lt;- doesn't work
      }
  
      function arrow_left(id_number) {
          var present_div = $('#' + id_number);
          id_number = id_number - 1;
          var prev_div = $('#' + id_number);
  
          $(present_div).replaceWith(prev_div); 
          //$(prev_div).replaceWith(present_div); &lt;- doesn't work
      }
  &lt;/script&gt;
  
      &lt;div id='ID_1' class='col-lg-4 col-md-6 portfolio-item'&gt;
      &lt;div class='thumbnail'&gt;
          &lt;div onclick='arrow_left(1);'&gt;&lt;span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div onclick='arrow_right(1);'&gt;&lt;span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;img id='1' class='img-responsive' src='path/to/img'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id='ID_2' class='col-lg-4 col-md-6 portfolio-item'&gt;
      &lt;div class='thumbnail'&gt;
          &lt;div onclick='arrow_left(2);'&gt;&lt;span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div onclick='arrow_right(2);'&gt;&lt;span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;img id='2' class='img-responsive' src='path/to/img'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='clearfix visible-md-block'&gt;&lt;/div&gt;
  
  &lt;div id='ID_3' class='col-lg-4 col-md-6 portfolio-item'&gt;
      &lt;div class='thumbnail'&gt;
          &lt;div onclick='arrow_left(3);'&gt;&lt;span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div onclick='arrow_right(3);'&gt;&lt;span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;img id='3' class='img-responsive' src='path/to/img'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='clearfix visible-lg-block'&gt;&lt;/div&gt;
  &lt;div id='ID_4' class='col-lg-4 col-md-6 portfolio-item'&gt;
      &lt;div class='thumbnail'&gt;
          &lt;div onclick='arrow_left(4);'&gt;&lt;span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div onclick='arrow_right(4);'&gt;&lt;span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;img id='4' class='img-responsive' src='path/to/img'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='clearfix visible-md-block'&gt;&lt;/div&gt;
  
  &lt;div id='ID_5' class='col-lg-4 col-md-6 portfolio-item'&gt;
      &lt;div class='thumbnail'&gt;
          &lt;div onclick='arrow_left(5);'&gt;&lt;span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div onclick='arrow_right(5);'&gt;&lt;span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;img id='5' class='img-responsive' src='path/to/img'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id='ID_6' class='col-lg-4 col-md-6 portfolio-item'&gt;
      &lt;div class='thumbnail'&gt;
          &lt;div onclick='arrow_left(6);'&gt;&lt;span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div onclick='arrow_right(6);'&gt;&lt;span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;img id='6' class='img-responsive' src='path/to/img'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='clearfix visible-lg-block'&gt;&lt;/div&gt;
  
  &lt;div class='clearfix visible-md-block'&gt;&lt;/div&gt;
  
  &lt;div id='ID_7' class='col-lg-4 col-md-6 portfolio-item'&gt;
      &lt;div class='thumbnail'&gt;
          &lt;div onclick='arrow_left(7);'&gt;&lt;span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div onclick='arrow_right(7);'&gt;&lt;span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;img id='7' class='img-responsive' src='path/to/img'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't have idea how upgreat that. If anyone can help me? Mabye someone know some other solution for that, but no drag and drop - I tested jQuery UI sortable and it doesn't work so well.</p>
  
  <p>I don't need slider. I need present all images in page and changing them order (in administrator panel). Each image in database have field "Order" which affect the display order of images on page. I'm looking for solution for nice change this order.</p>