需要帮助，根据屏幕宽度删除或​​隐藏div

Question

因此，我无法将大于768px 的任何屏幕上的3x3图像库布局更改为 <大于768px 的任何屏幕的图像滑块（移动）。

在所有人的帮助下，尤其是在 Danilo （评论中的解决方案）的帮助下，问题在于CSS无法正确定位屏幕，我需要- @media only screen em>，我也错过了 DIV ...（我知道菜鸟错误）。

因此，如果有人尝试在 Bootstrap 4 中将显示的内容从桌面布局更改为移动布局，则可以使用 CSS媒体查询将包装的DIV 定位为显示还是不显示。

下面更新了工作片段：

@media only screen and (min-width: 768px) {
    .slider {
        display: none;
    }
    .block {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .slider {
        display: block;
    }
    .block {
        display: none;
    }
}

.hold-tests {
    display: flex;
    width: 100%;
}

.col {
    flex: 1;
} 

	<!--- Start of Gallery Section -->	
	<div id="hold-tests">
		<div class="col slider">
			<div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
				<div class="carousel-inner col-" role="listbox">
					<!--- First Slide -->
					<div class="carousel-item active">
						<img src="Img/PHportrait.png" alt="background image">
					</div>
					<div class="carousel-item">
						<img src="Img/PHportrait2.png" alt="background image">
					</div>
					<div class="carousel-item">
						<img src="Img/PHportrait.png" alt="background image">
					</div>
				</div>
					<div class="narrow">
						<div class="col-12">
							<p class="lead text-center">Want to see more of my work?</p>
							<!-- add in social media icons and add target="_blank" to open in new tab -->
						</div>
					</div>
			</div>
		</div>	

		<div class="col block">
			<div id="gallery" class="offset">
				<div class="col-md">
					<div class="row no-padding">
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="narrow">
					<div class="col-12">
						<p class="lead text-center">Want to see more of my work?</p>
							<!-- add in social media icons and add target="_blank" to open in new tab -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--- End of Gallery Section -->

Answer 1

由于您正在使用引导程序，因此请使用它。不需要jQuery，因为它已经完全覆盖了。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-none d-md-block">
  Only visible starting from md
</div>
<div class="d-md-none">
  Only visible on small screen
</div>

https://getbootstrap.com/docs/4.0/utilities/display/

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

---

还请注意，id通常不以#开头。即使这可能是合法的，但您至少必须在jquery代码中使用$（'## option1'）选择它们。

Answer 2

您只需使用CSS即可

html

<div class="hold-tests">
    <div class="col test1">Test1</div>
    <div class="col test2">Test2</div>
    <div class="col test3">Test3</div>
</div>

css

@media only screen and (min-width: 768px) {
    .test1 {
        display: none;
    }
    .test3 {
        display: block;
    }
}
@media only screen and (max-width: 768px) {
    .test3 {
        display: none;
    }
}

.hold-tests {
    display: flex;
    width: 100%;
}

.col {
    flex: 1;
}