title: How to sort alphabetically part of the HTML page (images and text)
body: <p>I need to order each of the items in the gallery by alphabetical order. Each item would have an image and title. </p>
  
  <p><img src="https://i.stack.imgur.com/L3F6Q.png." alt="Screenshot of the working code"></p>
  
  <p>The code for the gallery:</p>
  
  <pre><code>&lt;section id="content"&gt;
  &lt;div class="main"&gt;
     &lt;div class="container_24"&gt;
         &lt;div class="padding-1"&gt;
            &lt;div class="wrapper"&gt;
                &lt;article class="grid_24"&gt;
                    &lt;h4 class="prev-indent-bot"&gt;Piante da interno&lt;/h4&gt;
                             &lt;div class="wrapper"&gt;
                                 &lt;div class="col-3 spacing-3"&gt;
                                      &lt;div class="border"&gt;
                                          &lt;a class="lightbox-image" href="images/Interno/Phalaenopsis_big.jpg" data-gal="prettyPhoto[gallery2]"&gt;&lt;img src="images/Interno/Phalaenopsis_small.jpg" width="224" height="208" alt=""&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div class="bg-title"&gt;
                                          &lt;div class="box-padding1"&gt;
                                              &lt;h5&gt;Phalaenopsis&lt;/h5&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                 &lt;/div&gt;
                                 &lt;div class="col-3 spacing-3"&gt;
                                      &lt;div class="border"&gt;
                                          &lt;a class="lightbox-image" href="images/Interno/Capelvenere_big.jpg" data-gal="prettyPhoto[gallery2]"&gt;&lt;img src="images/Interno/Capelvenere_small.jpg" width="224" height="208" alt=""&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div class="bg-title"&gt;
                                          &lt;div class="box-padding1"&gt;
                                              &lt;h5&gt;Capelvenere&lt;/h5&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                 &lt;/div&gt;
                                 &lt;div class="col-3 spacing-3"&gt;
                                      &lt;div class="border"&gt;
                                          &lt;a class="lightbox-image" href="images/Interno/Kalanchoe_big.jpg" data-gal="prettyPhoto[gallery2]"&gt;&lt;img src="images/Interno/Kalanchoe_small.jpg" width="224" height="208" alt=""&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div class="bg-title"&gt;
                                          &lt;div class="box-padding1"&gt;
                                              &lt;h5&gt;Kalanchoe&lt;/h5&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                 &lt;/div&gt;
                                 &lt;div class="col-3"&gt;
                                      &lt;div class="border"&gt;
                                          &lt;a class="lightbox-image" href="images/Interno/Nertera_big.jpg" data-gal="prettyPhoto[gallery2]"&gt;&lt;img src="images/Interno/Nertera_small.jpg" width="224" height="208" alt=""&gt;&lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div class="bg-title"&gt;
                                          &lt;div class="box-padding1"&gt;
                                              &lt;h5&gt;Nertera&lt;/h5&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                 &lt;/div&gt;
                             &lt;/div&gt;
                          &lt;/article&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>Is there a simple solution using javascript or html?</p>
  
  <p>P.S. sorry for my english.</p>