Edit in JSFiddle

<div class="post">
    <h2>Layout breakpoint at 600px</h2>
    <div id="share-container"></div>
    <p style="color: blue; font-weight: 700">(Counter position is inverted in horizontal position with CSS flex)</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac volutpat diam, ac elementum ligula. Etiam a turpis mauris. Vivamus commodo enim eget libero tempus vestibulum vitae ac nulla. Nullam ex arcu, consequat quis interdum non, gravida ut nunc. Nullam finibus sem in nibh mollis, in sagittis orci scelerisque. Mauris non iaculis est. Nunc eu dolor non velit sodales cursus. Aenean lacinia lorem nec magna finibus, nec ornare erat tristique. Nulla placerat ante orci, et blandit quam ultricies sit amet. Nullam a bibendum sapien, a accumsan leo. Proin at tortor non enim sollicitudin mattis. Sed accumsan sem vitae leo molestie, eget malesuada eros varius. Suspendisse maximus vestibulum arcu ut mattis. Duis semper nisl quis lorem facilisis, quis congue ante pulvinar. Nulla finibus quam orci, non varius purus ultricies vitae. Integer condimentum convallis arcu quis pharetra. Mauris magna felis, dictum in sem lobortis, eleifend sagittis erat. Donec blandit laoreet lacinia. Fusce tristique, ligula vitae tincidunt hendrerit, tortor orci placerat orci, sit amet lobortis diam orci in lacus. Quisque eleifend, libero non vulputate interdum, justo turpis porta ex, viverra hendrerit leo urna non purus. In non nulla sed turpis condimentum porttitor ut ac turpis. Suspendisse mollis nisi ac rutrum viverra. Sed in urna ullamcorper, cursus nibh eget, euismod purus. Morbi purus libero, dictum id diam nec, fringilla porttitor ex. In a felis in leo tempus finibus. Vivamus tempus eros sodales tortor scelerisque vulputate. Nunc at pretium libero. Proin at metus porttitor, dignissim orci sed, ullamcorper tortor. Suspendisse elementum mauris sagittis libero rhoncus, sit amet fermentum urna pharetra. In vel purus non nibh ullamcorper varius eget et elit. Integer at egestas orci. Nam non dictum velit, non sagittis odio. Praesent mattis augue sit amet orci placerat vehicula. Quisque tempor mauris sit amet libero ullamcorper feugiat. Donec risus eros, sodales et justo sed, sollicitudin semper eros. Proin posuere lectus ac risus scelerisque, et lacinia risus mollis. Curabitur dictum nunc eget ligula ullamcorper, vel porttitor turpis eleifend. Sed in felis urna. Mauris non urna quis arcu bibendum tincidunt consequat quis ipsum. Proin varius laoreet tempus. Nullam id odio ac metus euismod consectetur sed ut velit. Donec hendrerit, turpis id vehicula consectetur, risus dolor sollicitudin lectus, ut suscipit turpis est vel nisi. Integer efficitur erat vulputate, ultrices sapien sed, consequat tellus. Donec finibus tellus ipsum, at volutpat metus tristique varius. Phasellus ac risus vulputate justo venenatis vestibulum at ac elit. Nam vel tincidunt ligula. Integer id consequat augue. Duis vulputate nulla eu est suscipit, pulvinar convallis purus ullamcorper</p>
</div>
@mixin common-share-button() {
  color: white;
    
  a {
    color: inherit;
    display: block;
    width: 100%;
    outline: 0;
  }
    
  .counter {
    font: 12px "Lucida Sans Unicode", "Lucida Grande", sans-seriff;
    line-height: 1em;
    padding: 2px 0px 1px 0px;
    &:empty {
      display: none;
    }
  }
}

@mixin default-share-button($background) {
  @include common-share-button();
  background: $background;

  &:hover {
    background: lighten($background, 7%);
    .counter {
      background: darken($background, 3%);
    }
  }

  .counter {
    background: darken($background, 10%);
    &:hover {
      background: darken($background, 3%);
    }
  }
}

.share {
  .button {
    font-size: 24px;
    text-align: center;
    width: 40px;

    i {
      padding: 5px;
    }

    &.twitter {
      @include default-share-button(#5EA9DD);
    }
    &.google-plus {
      @include default-share-button(#CD3C2A);
    }
    &.pinterest {
      @include default-share-button(#BC071B);
    }
    &.facebook {
      @include default-share-button(#4966B6);
    }
    &.linkedin {
      @include default-share-button(#1783BC);
    }
    &.stumbleupon {
      @include default-share-button(#EA4B24);
    }
  }

  .counter {
    font: 12px "Lucida Sans Unicode", "Lucida Grande", sans-seriff;
    padding: 2px 0px 1px 0px;
  }

  &.counter-top {
    .button {
      vertical-align: bottom;
    }
  }
  &.counter-bottom {
    .button {
      vertical-align: top;
    }
  }
    
  /* default display: fixed to the left */
  @media (min-width: 600px) {
    left: 0;
    top: 30%;
    position: fixed;
  }

 /* on smaller screens switch to horizontal display
    and invert counter position
 */
  @media (max-width: 600px) {
    position: static;
  
    .button {
      display: inline-block;
      margin: 0 4px 0 0;
    }
  
    &.counter-top {
      .button {
        vertical-align: top;
      }
    }
    &.counter-bottom {
      .button {
        vertical-align: bottom;
      }
    }
  
    .button {
      display: inline-flex;
      flex-direction: column-reverse;
    }
  }
}

/*jsFiddle example*/
.post {
    margin-left: 45px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-seriff;
}
$(function () {
  var knownButtons = ['google-plus', 'twitter', 'pinterest', 'facebook', 'stumbleupon', 'linkedin'];

  /**
   * jQuery plugin - create share buttons
   *
   * @param {Object} [options]
   * @param {string[]} [options.buttons] - list of share buttons to be shown
   * @param {string} [options.url] - shared URL (by default current)
   * @param {string} [options.media] - shared image (optionally used by Pinterest)
   * @param {string|boolean} [options.counter=none] - type of display for share counter (top|bottom|none)
   * @param {string} [options.className] - CSS class for the root DOM element
   */
  $.fn.sharify = function (options) {
    var settings = $.extend({
      buttons: knownButtons.slice(),
      url: document.location.origin + document.location.pathname,
      media: null,
      counter: false,
      className: ''
    }, options);

    settings.buttons.contains = function (item) {
      return this.indexOf(item) > -1;
    };

    if (settings.counter && settings.counter !== 'none' && settings.counter !== 'bottom') {
      settings.counter = 'top';
    }
    else if (!settings.counter) {
      settings.counter = 'none';
    }

    return this.each(function () {
      var $share = $('<div/>', {class: $.trim(['share', 'counter-' + settings.counter, settings.className].join(' '), settings.className)});
      $.each(settings.buttons, function (index, name) {
        if (knownButtons.indexOf(name) > -1) {
          $share.append(createButton(name, settings));
        }
      });

      enableShareClick($share, settings);
      if (settings.counter !== 'none') {
        setShareCount($share, settings);
      }
      $(this).append($share);
    });
  };

  function createButton(name, settings) {
    var $button = $('<div/>', {'class': ['button', name].join(' ')});
    switch (settings.counter) {
      case 'top':
        $button.append(
          $('<div/>', {'class': 'counter'})).append(
          $('<a/>', {'href': '#'}).append(
            $('<i/>', {class: 'fa fa-' + name}))
        );
        break;
      case 'bottom':
        $button.append(
          $('<a/>', {'href': '#'}).append(
            $('<i/>', {class: 'fa fa-' + name}))
        ).append(
          $('<div/>', {'class': 'counter'})
        );
        break;
      case 'none':
        $button.append(
          $('<a/>', {'href': '#'}).append(
            $('<i/>', {class: 'fa fa-' + name})));
        break;
    }
    return $button;
  }

  function enableShareClick($share, settings) {
    function openShareWindow(e) {
      window.open(e.href, 'mywin', 'left=20,top=20,width=500,height=400,toolbar=1,resizable=0');
      return false;
    }

    var buttons = settings.buttons;
    if (buttons.contains('twitter')) {
      $share.find(".twitter a")
        .attr("href", "//twitter.com/intent/tweet?text=" + document.title + "&url=" + settings.url)
        .on("click", function () {
          return openShareWindow(this)
        });
    }
    if (buttons.contains('facebook')) {
      $share.find(".facebook a")
        .attr("href", "//www.facebook.com/sharer/sharer.php?u=" + settings.url)
        .on("click", function () {
          return openShareWindow(this)
        });
    }
    if (buttons.contains('linkedin')) {
      $share.find(".linkedin a")
        .attr("href", "//www.linkedin.com/cws/share?url=" + settings.url)
        .on("click", function () {
          return openShareWindow(this)
        });
    }
    if (buttons.contains('pinterest')) {
      if (settings.media) {
        $share.find(".pinterest a")
          .attr("href", "//www.pinterest.com/pin/create/button/" + "?url=" + settings.url + "&media=" + settings.media)
          .on("click", function () {
            return openShareWindow(this)
          });
      }
      else { // let Pinterest resolve your Pin media
        $share.find(".pinterest a").on("click", function (ev) {
          ev.preventDefault();
          var e = document.createElement('script');
          e.setAttribute('type', 'text/javascript');
          e.setAttribute('charset', 'UTF-8');
          e.setAttribute('src', 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999);
          document.body.appendChild(e);
        });
      }
    }
    if (buttons.contains('google-plus')) {
      $share.find(".google-plus a")
        .attr("href", "//plus.google.com/share?url=" + settings.url)
        .on("click", function () {
          return openShareWindow(this)
        });
    }
    if (buttons.contains('stumbleupon')) {
      $share.find(".stumbleupon a")
        .attr("href", "//www.stumbleupon.com/badge/?url=" + settings.url)
        .on("click", function () {
          return openShareWindow(this)
        });
    }
  }

  function setShareCount($share, settings) {
    var buttons = settings.buttons;
    if (buttons.contains('twitter')) {
      $.getJSON("http://urls.api.twitter.com/1/urls/count.json?url=" + settings.url + "&callback=?",
        function (json) {
          $share.find(".twitter .counter").text(formatCount(json.count));
        });
    }
    if (buttons.contains('facebook')) {
      $.getJSON("http://graph.facebook.com/" + settings.url, function (json) {
        $(".facebook .counter").text(formatCount(json.shares));
      });
    }

    if (buttons.contains('pinterest')) {
      $.getJSON("http://api.pinterest.com/v1/urls/count.json?url=" + settings.url + "&callback=?", function (json) {
        $(".pinterest .counter").text(formatCount(json.count));
      });
    }

    if (buttons.contains('linkedin')) {
      $.getJSON("http://www.linkedin.com/countserv/count/share?url=" + settings.url + "&callback=?",
        function (json) {
          $(".linkedin .counter").text(formatCount(json.count));
        });
    }

    function formatCount(num) {
      num = num || 0;
      if (num >= 1000000000) {
        return (num / 1000000000).toFixed(1) + 'G';
      }
      if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
      }
      if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
      }
      return num;
    }
  };
});

// Usage example:
$(function(){
  $('#share-container').sharify({
      url: 'http://jsfiddle.net',
      buttons: ['twitter', 'google-plus', 'facebook', 'pinterest', 'linkedin', 'stumbleupon'], 
      counter: 'bottom'});
});

External resources loaded into this fiddle: