this is a html 5 theme i have downloaded .i want the sidebar to move to the rightside .the html of the page is given below…consider the sidebar part of the page as most of the page code is formatted.
<html>
<head>
<title>Future Imperfect by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<header id="header">
<h1><a href="index.html">Future Imperfect</a></h1>
<nav class="links">
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Feugiat</a></li>
<li><a href="#">Tempus</a></li>
<li><a href="#">Adipiscing</a></li>
</ul>
</nav>
<nav class="main">
<ul>
<li class="search">
<a class="fa-search" href="#search">Search</a>
<form id="search" method="get" action="#">
<input type="text" name="query" placeholder="Search" />
</form>
</li>
<li class="menu">
<a class="fa-bars" href="#menu">Menu</a>
</li>
</ul>
</nav>
</header>
<!-- Header -->
<!-- Menu -->
<section id="menu" float="right">
<!-- Search -->
<section>
<form class="search" method="get" action="#">
<input type="text" name="query"
placeholder="Search" />
</form>
</section>
<!-- Links -->
<section>
<ul class="links">
<li>
<a href="#">
<h3>Lorem ipsum</h3>
<p>Feugiat tempus veroeros dolor</p>
</a>
</li>
<li>
<a href="#">
<h3>Dolor sit amet</h3>
<p>Sed vitae justo condimentum</p>
</a>
</li>
<li>
<a href="#">
<h3>Feugiat veroeros</h3>
<p>Phasellus sed ultricies mi
congue</p>
</a>
</li>
<li>
<a href="#">
<h3>Etiam sed consequat</h3>
<p>Porta lectus amet ultricies</p>
</a>
</li>
</ul>
</section>
<!-- Actions -->
<section>
<ul class="actions stacked">
<li><a href="#" class="button large fit">Log
In</a></li>
</ul>
</section>
</section>
<!-- Main -->
<div id="main">
<!-- Post -->
<!-- <!-- Post -->
<article class="post">
<header>
<div class="title">
<h2><a href="single.html"><?php echo
"$title"; ?>
</div>
<div class="meta">
<time class="published" datetime="2015-
10-25">October 25, 2015</time>
<a href="#" class="author"><span
class="name"><?php echo "$author" ;?></span><img
src="images/<?php echo "$image"; ?>" alt="" /></a>
</div>
</header>
<a href="single.html" class="image featured"><img
src="images/pic02.jpg" alt="" /></a>
<p><?php echo "$content"; ?></p>
<footer>
<ul class="actions">
<li><a href="single.html" class="button
large">Continue Reading</a></li>
</ul>
<ul class="stats">
<li><a href="#">General</a></li>
<li><a href="#" class="icon fa-
heart">28</a></li>
<li><a href="#" class="icon fa-
comment">128</a></li>
</ul>
</footer>
</article>
<!-- Post -->
<!-- Pagination -->
<ul class="actions pagination">
<li><a href="" class="disabled button large
previous">Previous Page</a></li>
<li><a href="#" class="button large next">Next
Page</a></li>
</ul>
</div>
<!--sidebar-->
<!-- Posts List -->
<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>
<!-- About -->
<section class="blurb">
<h2>About</h2>
<p>Mauris neque quam, fermentum ut nisl vitae,
convallis maximus nisl. Sed mattis nunc id lorem euismod amet
placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at
phasellus sed ultricies.</p>
<ul class="actions">
<li><a href="#" class="button">Learn More</a>
</li>
</ul>
</section>
<!-- Footer -->
<section id="footer">
<ul class="icons">
<li><a href="#" class="fa-twitter"><span
class="label">Twitter</span></a></li>
<li><a href="#" class="fa-facebook"><span
class="label">Facebook</span></a></li>
<li><a href="#" class="fa-instagram"><span
class="label">Instagram</span></a></li>
<li><a href="#" class="fa-rss"><span
class="label">RSS</span></a></li>
<li><a href="#" class="fa-envelope"><span
class="label">Email</span></a></li>
</ul>
<p class="copyright">© Untitled. Design: <a
href="http://html5up.net">HTML5 UP</a>. Images: <a
href="http://unsplash.com">Unsplash</a>.</p>
</section>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
this is the css of the sidebar
/* Sidebar */
#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;
}
}