#sidebar {
    margin-right: 3em;
    min-width: 22em;
    width: 22em;
    float: right;

}

    #sidebar > * {
        border-top: solid 1px rgba(160, 160, 160, 0.3);
        margin: 3em 0 0 0;
        padding: 3em 0 0 0;
         float: right;
    }

    #sidebar > :first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
         float: right;
    }

    @media screen and (max-width: 1280px) {

        #sidebar {
            border-top: solid 1px rgba(160, 160, 160, 0.3);
            margin: 3em 0 0 0;
            min-width: 0;
            padding: 3em 0 0 0;
            width: 100%;
            overflow-x: hidden;
             float: right;
        }

    }

<section id="sidebar">

       <!-- Intro -->
         <section id="intro">
    <a href="#" class="logo"><img src="images/logo.jpg" alt="" /></a>
    <header>
        <h2>Future Imperfect</h2>
        <p>Another fine responsive site template by <a
      href="http://html5up.net">HTML5 UP</a></p>
    </header>
     </section>

      <!-- Mini Posts -->
    <section>
    <div class="mini-posts">

        <!-- Mini Post -->
            <article class="mini-post">
                <header>
                    <h3><a href="single.html">Vitae sed condimentum</a></h3>
                    <time class="published" datetime="2015-10-20">October 20,
          2015</time>
                    <a href="#" class="author"><img src="images/avatar.jpg"
         alt="" /></a>
                </header>
                <a href="single.html" class="image"><img
         src="images/pic04.jpg" alt="" /></a>
            </article>

        <!-- Mini Post -->
            <article class="mini-post">
                <header>
                    <h3><a href="single.html">Rutrum neque accumsan</a></h3>
                    <time class="published" datetime="2015-10-19">October 19,
             2015</time>
                    <a href="#" class="author"><img src="images/avatar.jpg"
             alt="" /></a>
                </header>
                <a href="single.html" class="image"><img
             src="images/pic05.jpg" alt="" /></a>
            </article>

        <!-- Mini Post -->
            <article class="mini-post">
                <header>
                    <h3><a href="single.html">Odio congue mattis</a></h3>
                    <time class="published" datetime="2015-10-18">October 18,
         2015</time>
                    <a href="#" class="author"><img src="images/avatar.jpg"
                 alt="" /></a>
                </header>
                <a href="single.html" class="image"><img
           src="images/pic06.jpg" alt="" /></a>
            </article>

        <!-- Mini Post -->
            <article class="mini-post">
                <header>
                    <h3><a href="single.html">Enim nisl veroeros</a></h3>
                    <time class="published" datetime="2015-10-17">October 17,
            2015</time>
                    <a href="#" class="author"><img src="images/avatar.jpg"
           alt="" /></a>
                </header>
                <a href="single.html" class="image"><img
            src="images/pic07.jpg" alt="" /></a>
            </article>

    </div>
</section>
       <section>
     <ul class="posts">
        <li>
            <article>
                <header>
                    <h3><a href="single.html">Lorem ipsum fermentum ut nisl
           vitae</a></h3>
                    <time class="published" datetime="2015-10-20">October 20,
         2015</time>
                </header>
                <a href="single.html" class="image"><img
          src="images/pic08.jpg" alt="" /></a>
            </article>
        </li>
        <li>
            <article>
                <header>
                    <h3><a href="single.html">Convallis maximus nisl mattis
                 nunc id lorem</a></h3>
                    <time class="published" datetime="2015-10-15">October 15,
           2015</time>
                </header>
                <a href="single.html" class="image"><img
             src="images/pic09.jpg" alt="" /></a>
            </article>
        </li>
        <li>
            <article>
                <header>
                    <h3><a href="single.html">Euismod amet placerat vivamus
          porttitor</a></h3>
                    <time class="published" datetime="2015-10-10">October 10,
         2015</time>
                </header>
                <a href="single.html" class="image"><img
            src="images/pic10.jpg" alt="" /></a>
            </article>
        </li>
        <li>
            <article>
                <header>
                    <h3><a href="single.html">Magna enim accumsan tortor
          cursus ultricies</a></h3>
                    <time class="published" datetime="2015-10-08">October 8,
          2015</time>
                </header>
                <a href="single.html" class="image"><img
          src="images/pic11.jpg" alt="" /></a>
            </article>
        </li>
        <li>
            <article>
                <header>
                    <h3><a href="single.html">Congue ullam corper lorem ipsum dolor</a></h3>
                    <time class="published" datetime="2015-10-06">October 7, 2015</time>
                </header>
                <a href="single.html" class="image"><img src="images/pic12.jpg" alt="" /></a>
            </article>
        </li>
    </ul>
</section>