Przeniesienie diva

0

Witam, potrzebuje pomocy.
Mam pewien układ w bootstrapie i wszystko gra tylko nie wiem jak zrobić żeby żółty div przeniósł się na sam dół strony po zmniejszeniu okna przeglądarki do col-sm-12.
Na pewno istnieje jakieś rozwiązanie.
Pozdrawiam

<!DOCTYPE html>
<html><head>
    <title>DC2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- pliki CSS: -->
    <!-- oryginalny Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <!-- czcionka Open Sans-->    
    <!-- <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,latin-ext"> -->
<style>
	body{
		color: #fff;
		font-size : 50px;
	}
		
	.a{
		position:relative;	
	}
	.test{
		height:860px; 
		float: right; 
		background-color:yellow; 
		margin:10px;
		width: 100%;
		
	}
	.square{
		height:200px;
		background-color: #1c2b1c;
		margin:10px;
		
	}
</style>
</head><body>
	<div class="container">
		<div class="row a">
			<div class="col-md-3 col-xs-12" style="float: right">
				<div class="test"> </div>
				    <!--<iframe src="http://techcrunch.com"></iframe> -->
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square" id="test2">
					1
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					2
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					3
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					4
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					5
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					6
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					7
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					8
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					9
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					10
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					11
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					12
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					13
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					14
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					15
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					16
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					17
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					18
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					19
				</div>
			</div>
			<div class="col-md-3 col-sm-4 col-xs-6">
				<div class="square">
					20
				</div>
			</div>

		</div>
		
	</div>
	
<section>
	    <!-- sekcja JavaScript  -->

</section>
</body>
</html>
0

widzę, że nikt się nie garnie to się poświęcę :)

w boostrapie masz klasy push/pull
czyli przesuwasz kolumny o określoną ilość, gdzie:

col-y-push-x

y - rozdzielczość xs, sm, md, lg
x - liczba kolumn o które chcesz przesunąć

to powinno zadziałać, tylko napaćkałeś trochę swoich klas więc zrób to porządnie od początku

0

pull/push to są klasy przesuwające elementy w prawa i lewa stronę, to nie rozwiązuje problemu

0

Ja bym użył flexbox (z uwagi na order) do tego i nie ruszał bootstrapa... ale skoro już o nim mowa, to może trzymajmy się zasady KISS i po prostu doklej na końcu takiego samego div'a i daj mu dodatkową klasę visible-sm, a temu na górze hidden-sm?

0

Własnie nie może być tren sam div 2x w kodzie ponieważ w tym divie bd sie renderować reklama bo to ma byc baner na reklamy. Chodzi o to że ten div ma być z prawej strony i ma rozpychac bootstrap. Ponieważ standardowe układy to lewa strona i prawa strona na reklamy itp. a mam przypadek że różnej wysokosci jest prawa strona i chce że jak sie skonczy prawa strona to nie zostaje biały pasek do samego dołu tylko lewa strona rozpycha sie na prawą.

1

W takim razie proponuję coś takiego:

(function() {
    var advertisement = document.querySelector('#advertisement');
    var container = advertisement.parentNode;

    var reorderAdvertisement = function () {
      container.removeChild(advertisement);
      
      /* Small devices (tablets, 768px and up) */
      if (window.matchMedia("(min-width: 768px)").matches) {
        return container.insertBefore(advertisement, container.firstChild);
      }
      
      container.insertBefore(advertisement, container.lastChild.nextSibling);
    }

    window.addEventListener('resize', reorderAdvertisement);
    window.addEventListener('load', reorderAdvertisement);
  })();

@Maciej Cąderek preferujesz w takim wypadku if-return, czy if-else?

0

Wielkie dzięki :)
Działa jak natura chciała :D

1 użytkowników online, w tym zalogowanych: 0, gości: 1