1

Estou tentando fazer com que a imagem fique ao lado do conteúdo em aparelhos maior que large mas isso não ocorre:

Segue meu código:

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 mt-5 float-left">

                <h2><em>COMO COMPRAR?</em></h2>
                <p>
                    Você pode escolher os bolos e doces de nossa linha fixa, que possui mais de 20 sabores e decorações.
                    Clique acima na categoria "Produtos" para conferir as delícias que oferecemos.
                    Os pedidos devem ser feitos por telefone, com pelo menos 24 horas de antecedência, dependendo da ocasião (datas especiais e feriados). 
                </p>
                <div class="col-xs-12 col-sm-12 mt-5 float-right">
                    <img class="" src="../assets/img/producaoartesanal.png" style="max-width:450px" alt="">
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-6 float-left">
                <h2><em>LINHA PERSONALIZADA</em></h2>
                <p>
                    Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
                    Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
                </p>
            </div>
            <div class="col-xs-12 col-sm-12">
                <img class="float-right" src="../assets/img/ingredientesveganos.png" style="max-width:450px" alt="">
            </div>
        </div>
2
  • Jovem no Bootstrap 4 não exite a medida XS, tipo col-xs-, tem certeza que é a versão 4 que vc está usando mesmo?
    – hugocsl
    Commented 11/09/2018 às 12:27
  • Na verdade é a versão 4 é por força do hábito o col-xs-* kkk Commented 11/09/2018 às 14:04

1 Resposta 1

1

Sua estrutura HTML estava meio desorganizada, segundo os modelos de Grid do Bootstrap. Fiz apenas pequenos ajuste e agora está de acordo com o que eu acredito ser sua ideia. Não foi preciso usar nenhum CSS, só organizando o HTML e usando as classes default do Bootstrap ficou no jeito.

O que foi feito na verdade é um aninhamento do Grid, inclusive conta na documentação Oficial do Grid do Bootstrap https://getbootstrap.com/docs/4.0/layout/grid/#nesting

Veja o resultado, e teste também em diferentes tamanhos de tela!

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container">
	<div class="row">
		<div class="col-12 col-sm-6 mt-5">
			<div class="row">
				<div class="col-12 col-lg-6">
					<h2><em>LINHA PERSONALIZADA</em></h2>
					<p>
						Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
						Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
					</p>
				</div>
				<div class="col-12 col-lg-6">
					<img class="" src="http://unsplash.it/100/100" style="max-width:450px" alt="">
				</div>
			</div>
		</div>

		<div class="col-12 col-sm-6 mt-5">
			<div class="row">
				<div class="col-12 col-lg-6">
					<h2><em>LINHA PERSONALIZADA</em></h2>
					<p>
						Caso queira um bolo diferente ou personalizado para sua festa, entre em contato conosco com, no mínimo, uma semana de antecedência.
						Desenhamos e montamos bolos e doces temáticos para todos os tipos de eventos, festas e feiras.Solicite orçamento.
					</p>
				</div>
				<div class="col-12 col-lg-6">
					<img class="" src="http://unsplash.it/100/100" style="max-width:450px" alt="">
				</div>
			</div>
		</div>
	</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .